Rollup.js 之六：使用 npm 包

来源：rollup.js 官网

有时候，项目会依赖 npm 包。Rollup 和 Webpack、Browserify 不同，默认不知道如何处理包之间的关系 --- 我们需要做一些配置。

举个例子，我们需要一个简单的依赖：the-answer，它会输出人生、宇宙等终极问题的答案：

npm install --save the-answer
# 简写形式：
npm i -S the-answer

注意到我们这次使用了 --save 选项，所以它会存储到 package.json 文件的 dependencies 字段。

如果我们更新了 src/main.js 文件...

import answer from 'the-answer';

export default function() {
    console.log('the answer is ' + answer);
}

然后运行 Rollup ...

npm run build

我们会看到一条警告：

 'the-answer' is imported by src/main.js, but could not be resolved – treating it as an external dependency

输出的结果 bundle.js 依然可以在 Node.js 中使用，因为 import 指令变成了 CommonJS 的 require 指令，但是 the-answer 没有打包到结果中。为此，我们需要一个插件。

rollup-plugin-node-resolve

rollup-plugin-node-resolve 插件告诉 Rollup 如何搜寻外部依赖。安装命令如下...

npm install --save-dev rollup-plugin-node-resolve

然后添加到你的配置文件：

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';

export default {
    entry: 'src/main.js',
    format: 'cjs',
    plugins: [resolve()],
    dest: 'bundle.js'
};

这次，当你再次运行 npm run build，就没有警告了 --- 输出文件包含引入的模块了。

rollup-plugin-commonjs

有些库象 the-answer 一样，暴露了 ES6 风格的模块，可以如上所示引用。但是，目前 npm 上大多数模块使用了 CommonJS 风格。在此之前，需要将 CommonJS 转换为 ES2015，然后才能供 Rollup 享用。

rollup-plugin-commonjs 就是这样的插件。

注意，rollup-plugin-commonjs 需要在其他插件转换代码之前引入，这样可以避免 CommonJS 语法规范被其他插件破坏。

下一篇：使用 Babel