教程
#
创建第一个bundle(Creating your first bundle)开始前, 需要安装 Node.js, 这样才可以使用 npm ;还需要了解如何使用 command line。
使用 Rollup 最简单的方法是通过 Command Line Interface (或 CLI)。先全局安装 Rollup (之后会介绍如何在项目中进行安装,更便于打包,但现在不用担心这个问题)。在命令行中输入以下内容:
现在可以运行 rollup
命令了。试试吧~
由于没有传递参数,所以 Rollup 打印出了使用说明。这和运行 rollup --help
或 rollup -h
的效果一样。
我们来创建一个简单的项目:
首先,我们需要个 入口。将以下代码粘贴到新建的文件 src/main.js
中:
之后创建入口文件引用的 foo.js
模块:
现在可以创建 bundle 了:
-f
选项(--output.format
的缩写)指定了所创建 bundle 的类型——这里是 CommonJS(在 Node.js 中运行)。由于没有指定输出文件,所以会直接打印在 stdout
中:
也可以像下面一样将 bundle 保存为文件:
(你也可以用 rollup src/main.js -f cjs > bundle.js
,但是我们之后会提到,这种方法在生成 sourcemap 时灵活性不高。)
试着运行下面的代码:
恭喜,你已经用 Rollup 完成了第一个 bundle。
#
使用配置文件(Using config files)上面的方式还不错,但是如果添加更多的选项,这种命令行的方式就显得麻烦了。
为此,我们可以创建配置文件来囊括所需的选项。配置文件由 JavaScript 写成,比 CLI 更加灵活。
在项目中创建一个名为 rollup.config.js
的文件,增加如下代码:
我们用 --config
或 -c
来使用配置文件:
同样的命令行选项将会覆盖配置文件中的选项:
(注意 Rollup 本身会处理配置文件,所以可以使用 export default
语法——代码不会经过 Babel 等类似工具编译,所以只能使用所用 Node.js 版本支持的 ES2015 语法。)
如果愿意的话,也可以指定与默认 rollup.config.js
文件不同的配置文件:
#
使用插件(Using plugins)目前为止,我们通过相对路径,将一个入口文件和一个模块创建成了一个简单的 bundle。随着构建更复杂的 bundle,通常需要更大的灵活性——引入 npm 安装的模块、通过 Babel 编译代码、和 JSON 文件打交道等。
为此,我们可以用 插件(plugins) 在打包的关键过程中更改 Rollup 的行为。the Rollup wiki 维护了可用的插件列表。
此教程中,我们将使用 rollup-plugin-json,令 Rollup 从 JSON 文件中读取数据。
将 rollup-plugin-json 安装为开发依赖:
(我们用的是 --save-dev
而不是 --save
,因为代码实际执行时不依赖这个插件——只是在打包时使用。)
更新 src/main.js
文件,从 package.json 而非 src/foo.js
中读取数据:
编辑 rollup.config.js
文件,加入 JSON 插件:
npm run build
执行 Rollup。结果如下:
(注意只有我们实际需要的数据——name 和 devDependencies 和 package.json 中的其它数据被忽略了。这是 tree-shaking 起了作用。)