教程

优质

小牛编辑

128浏览

2023-12-01

创建第一个bundle(Creating your first bundle)

开始前, 需要安装 Node.js，这样才可以使用 npm ；还需要了解如何使用 command line。

使用 Rollup 最简单的方法是通过 Command Line Interface （或 CLI）。先全局安装 Rollup （之后会介绍如何在项目中进行安装，更便于打包，但现在不用担心这个问题）。在命令行中输入以下内容：

npm install rollup --global # or `npm i rollup -g` for short

现在可以运行 rollup 命令了。试试吧~

rollup

由于没有传递参数，所以 Rollup 打印出了使用说明。这和运行 rollup --help 或 rollup -h 的效果一样。

我们来创建一个简单的项目：

mkdir -p my-rollup-project/src
cd my-rollup-project

首先，我们需要个入口。将以下代码粘贴到新建的文件 src/main.js 中：

// src/main.js
import foo from './foo.js';
export default function () {
  console.log(foo);
}

之后创建入口文件引用的 foo.js 模块：

// src/foo.js
export default 'hello world!';

现在可以创建 bundle 了：

rollup src/main.js -f cjs

-f 选项（--output.format 的缩写）指定了所创建 bundle 的类型——这里是 CommonJS（在 Node.js 中运行）。由于没有指定输出文件，所以会直接打印在 stdout 中：

'use strict';

var foo = 'hello world!';

var main = function () {
  console.log(foo);
};

module.exports = main;

也可以像下面一样将 bundle 保存为文件：

rollup src/main.js -o bundle.js -f cjs

（你也可以用 rollup src/main.js -f cjs > bundle.js，但是我们之后会提到，这种方法在生成 sourcemap 时灵活性不高。）

试着运行下面的代码：

node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'

恭喜，你已经用 Rollup 完成了第一个 bundle。

使用配置文件(Using config files)

上面的方式还不错，但是如果添加更多的选项，这种命令行的方式就显得麻烦了。

为此，我们可以创建配置文件来囊括所需的选项。配置文件由 JavaScript 写成，比 CLI 更加灵活。

在项目中创建一个名为 rollup.config.js 的文件，增加如下代码：

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

我们用 --config 或 -c 来使用配置文件：

rm bundle.js # so we can check the command works!
rollup -c

同样的命令行选项将会覆盖配置文件中的选项：

rollup -c -o bundle-2.js # `-o` is short for `--output.file`

（注意 Rollup 本身会处理配置文件，所以可以使用 export default 语法——代码不会经过 Babel 等类似工具编译，所以只能使用所用 Node.js 版本支持的 ES2015 语法。）

如果愿意的话，也可以指定与默认 rollup.config.js 文件不同的配置文件：

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js

使用插件(Using plugins)

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

为此，我们可以用插件(plugins) 在打包的关键过程中更改 Rollup 的行为。the Rollup wiki 维护了可用的插件列表。

此教程中，我们将使用 rollup-plugin-json，令 Rollup 从 JSON 文件中读取数据。

将 rollup-plugin-json 安装为开发依赖：

npm install --save-dev rollup-plugin-json

（我们用的是 --save-dev 而不是 --save，因为代码实际执行时不依赖这个插件——只是在打包时使用。）

更新 src/main.js 文件，从 package.json 而非 src/foo.js 中读取数据：

// src/main.js
import { version } from '../package.json';

export default function () {
  console.log('version ' + version);
}

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

// rollup.config.js
import json from 'rollup-plugin-json';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [ json() ]
};

npm run build 执行 Rollup。结果如下：

'use strict';

var version = "1.0.0";

var main = function () {
  console.log('version ' + version);
};

module.exports = main;

（注意只有我们实际需要的数据——name 和 devDependencies 和 package.json 中的其它数据被忽略了。这是 tree-shaking 起了作用。）