Rollup 模块化打包工具

标题：Rollup 模块化打包工具

第0章 前置知识

0.1 ES 标准模块化规范-概述

历史上，JavaScript 一直没有模块（module）体系，没法将一个大程序拆分红互相依赖的小文件，再用简单的方法拼装起来。其余语言都有这项功能，好比 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，可是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目造成了巨大障碍。

在 ES6 以前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，并且实现得至关简单，彻底能够取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽可能的静态化，使得编译时就能肯定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时肯定这些东西。好比，CommonJS 模块就是对象，输入时必须查找对象属性。

一个模块就是一个独立的文件。该文件内部的全部变量，外部没法获取。

若是你但愿外部可以读取模块内部的某个变量，就必须使用export关键字导出该变量。想要是要其余模块导出的内容, 就必须使用 import 导入;

0.2 导入 (Importing)

导入的值不能从新分配，尽管导入的对象和数组能够被修改（导出模块，以及任何其余的导入，都将受到该修改的影响）。在这种状况下，它们的行为与 const 声明相似。

0.2.1 命名导入 (Named Imports)

从源模块导入其原始名称的特定项目。

import  { something } from './module.js';
复制代码

从源模块导入特定项，并在导入时指定自定义名称。

import { something as somethingElse } from './module.js';
复制代码

0.2.2 命名空间导入 (Namespace Imports)

将源模块中的全部内容做为对象导入，将全部源模块的命名导出公开为属性和方法。默认导出被排除在此对象以外。

import as module from './module.js'
复制代码

上面的 “something” 的例子将被附加到做为属性的导入对象上。“module.something”。

0.2.3 默认导入 (Default Import)

导入源文件的 默认导出

import something from './module.js';
复制代码

0.2.4 空的导入 (Empty Import)

加载模块代码，但不要建立任何新对象。

import  './module.js';
复制代码

这对于polyfills是有用的，或者当导入的代码的主要目的是与原型有关的时候。

0.3 导出 (Exporting)

0.3.1 命名导出 (Named exports)

导出具体声明的值：

var something = true;
export { something };
复制代码

在导出时重命名：

export { something as somethingElse };
复制代码

声明后当即导出：

// 这能够与 `var`, `let`, `const`, `class`, and `function` 配合使用
export var something = true;
复制代码

0.3.2 默认导出(Default Export)

导出一个值做为源模块的默认导出：

export default  something;
复制代码

仅当源模块只有一个导出时，才建议使用此作法。

将默认和命名导出组合在同一模块中是很差的作法，尽管它是规范容许的。

第1章 Rollup 入门

1.1 概述(Overview)

Rollup 是一个 JavaScript 模块打包器，能够将小块代码编译成大块复杂的代码，。Rollup 对代码模块使用新的 ES Module 标准，而不是之前的社区模块化方案，如 CommonJS 和 AMD。ES6 模块已经被现代化浏览器原生实现，2020 年 Vue 做者发布了 Vite ，定义为下一代前端开发与构建工具，目的是取代依赖 Webpack 打包的各类构建工具，而 Vite 的模块化工具使用的就是 Rollup；

1.2 快速入门

使用 npm install --global rollup 进行安装, 运行 rollup --help 能够查看可用的选项和参数。

帮助信息中的提示中: Usage: rollup [options] <entry file> 就展现了 Rollup 的基本用法, 咱们准备三个文件 index.js 为入口主文件, 而后使用 ES6 模块化语法引入user.js 和 message.js 文件,并在mian.js 中使用两个文件导出的数据内容;

// ======= index.js ============
import msg from './message'
import {names} from './user'

console.log(names())
console.log(msg)
console.log('Rollup Test Code')

// ======== message.js ===========

export default {
  hi: 'Hey '
}

// ======== user.js ===========

export const names = () => {
  console.log('xiling')
}

export const ages = () => {
  console.log(666)
}
复制代码

命令行终端执行: rollup index.js

$ rollup index.js

index.js → stdout...
var msg = {
  hi: 'Hey '
};

const names = () => {
  console.log('xiling');
};

console.log(names());
console.log(msg);
console.log('Rollup Test Code');
复制代码

在命令终端中, 咱们能看到最终打包后的编译代码被打印出来了, 咱们须要的是将小块的文件代码打包到一个大的文件中, 想要实现效果,只须要在命令中添加指定的命令参数便可: rollup index.js --file bundle.js ,生成 bundle.js 文件,代码以下:

var msg = {
  hi: 'Hey '
};

const names = () => {
  console.log('xiling');
};

console.log(names());
console.log(msg);
console.log('Rollup Test Code');
复制代码

咱们看到,打包后的代码很是简洁,就是将须要运行的代码,按照顺序拼装到一块儿,注意,是只会保留用到的代码,这就是Rollup 最先提出的 Tree-shaking 特性,后来被几乎因此打包工具参考引入;

什么是 Tree-shaking 呢? 基本原理很是简单, Rollup 在打包的过程当中, 静态分析代码中的 import，只引入最基本最精简代码, 并将排除任何未实际使用的代码。因此能够生成轻量、快速，以及低复杂度的 library 和应用程序。

1.3 配置文件

咱们通常在命令行中使用 Rollup。你也能够提供一份配置文件（可要可不要）来简化命令行操做，同时还能启用 Rollup 的高级特性, 配置文件是一个ES6模块，它对外暴露一个对象，这个对象包含了一些Rollup须要的一些选项。一般，咱们把这个配置文件叫作rollup.config.js，它一般位于项目的根目录;

注意: Rollup 自己会处理配置文件，因此可使用 export default 语法——代码不会通过 Babel 等相似工具编译，因此只能使用所用 Node.js 版本支持的 ES2015 语法。

配置选项列表 : https://www.rollupjs.com/guide/big-list-of-options

// rollup.config.js
export default {
  // 包的入口点 (例如：你的 main.js 或者 index.js)
  input:'index.js',
  // 出口配置
  output:{
    file:'budle.js', //打包到那个文件
    format:'esm' // 生成包的格式
  }
}
复制代码

输入 : input [string]: 'index.js' 这个包的入口点 (例如：你的 main.js 或者 app.js 或者 index.js)

输出 : output [object]:{}

output.file [string]: 'bundle.js' 要写入的文件。也可用于生成 sourcemaps，若是适用

output.format [string] :'iife' 生成包的格式。 下列之一:

• amd – 异步模块定义，用于像RequireJS这样的模块加载器
• cjs – CommonJS，适用于 Node 和 Browserify/Webpack
• esm – 将软件包保存为 ES 模块文件，在现代浏览器中能够经过 <script type=module> 标签引入
• iife – 一个自动执行的功能，适合做为<script>标签。（若是要为应用程序建立一个捆绑包，您可能想要使用它，由于它会使文件大小变小。）
• umd – 通用模块定义，以amd，cjs 和 iife 为一体
• system - SystemJS 加载器格式

若是你想使用Rollup的配置文件，记得在命令行里加上--config或者-c

若是须要不一样的配置，也能够指定与默认 rollup.config.js 文件不一样的配置文件：

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js
复制代码

第2章 使用插件

2.1 认识插件及插件的基本使用

目前为止，咱们经过相对路径，将一个入口文件和一个模块建立成了一个简单的 bundle。随着构建更复杂的 bundle，一般须要更大的灵活性——引入 npm 安装的模块、经过 Babel 编译代码、和 JSON 文件打交道等。

为此，咱们能够用 插件(plugins) 在打包的关键过程当中更改 Rollup 的行为;

Rollup 拥有很是丰富的插件体系，能够去 插件列表: https://github.com/rollup/awesome 看一下；

这里咱们将使用 rollup-plugin-json 插件，使 Rollup 可以读取 JSON 文件中的数据。

将 rollup-plugin-json 安装为开发依赖,由于代码实际执行时不依赖这个插件——只是在打包时使用：

npm install rollup-plugin-json -D 
复制代码

编辑 rollup.config.js 文件，加入 JSON 插件：

// 直接使用 ES module 导入插件
import json from 'rollup-plugin-json';

export default {
  input:'./src/index.js',
  output:{
    file:'./dist/budle.js',
    format:'iife',
  },
  // 插件导出的是一个函数，直接调用函数，
  // 注意，是调用的结果直接给到 插件数组中
  plugins: [ json() ]
}
复制代码

更改 index.js 的代码, 从 package.json 中读取数据：

import msg from './message'
import { names } from './user'

import { name, version } from '../package.json';
console.log(`项目名称:${name},项目版本：${version}`)

console.log(names())
console.log(msg)
console.log('Rollup Test Code')

复制代码

打包事后的代码, 只保留了 name 和 version 两个内容, 这也就是 tree-shaking 起的做用。

做者: 西岭老湿

参考来源 :

wangdoc.com/es6/module.…

cn.vitejs.dev/

www.rollupjs.com/