Rollup 与其他工具集成
#
npm packages在某些时候,你的项目很可能依赖于从 npm 安装到你的 node_modules
文件夹中的软件包。 与 Webpack 和 Browserify 这样的其他捆绑包不同,Rollup 不知道如何打破常规去处理这些依赖。 - 我们需要添加一些配置。
让我们添加一个简单的依赖 the-answer,它输出对生活、宇宙及其它一切的答案
如果修改我们的 src/main.js
入口文件...
...然后执行 Rollup...
...我们将会看到下面这些警告:
打包后的 bundle.js
仍然会在 Node.js 中工作,因为 import
声明转变成了 CommonJS 中的 require
语句,但是 the-answer
不包含在包中。因此,我们需要一个插件。
#
rollup-plugin-node-resolve这个 rollup-plugin-node-resolve 插件可以告诉 Rollup 如何查找外部模块。 安装它...
...将它加入到你的配置文件中:
这次,当你运行 npm run build
, 再没有警告输出 - 打包文件 bundle 包含了引用的模块。
#
rollup-plugin-commonjs一些库导出成你可以正常导入的 ES6 模块 - the-answer
就是一个这样的模块。 但是目前, npm 中的大多数包都是以 CommonJS 模块的形式出现的。 在它们更改之前,我们需要将 CommonJS 模块转换为 ES2015 供 Rollup 处理。
这个 rollup-plugin-commonjs 插件就是用来将 CommonJS 转换成 ES2015 模块的。
请注意, rollup-plugin-commonjs
应该用在其他插件转换你的模块之前 - 这是为了防止其他插件的改变破坏 CommonJS 的检测。
#
Peer dependencies假设你正在构建一个具有对等依赖关系(peer dependency)的库,例如 React 或 Lodash 。 如果你如上所述设置外部引用(externals),你的 Rollup 将把 所有 imports 的模块打包在一起:
你可以微调哪些导入是想要打包的,哪些是外部的引用(externals)。 对于这个例子,我们认为 lodash
是外部的引用(externals),而不是 the-answer
。
这是配置文件:
这样, lodash
现在将被视为外部的(externals),不会与你的库打包在一起。
external
接受一个模块名称的数组或一个接受模块名称的函数,如果它被视为外部引用(externals)则返回 true 。 例如:
如果你使用 babel-plugin-lodash 来最优选择 lodash
模块,在这种情况下, Babel 将转换你的导入语句,如下所示
external
的数组形式不会处理通配符,所以这个导入只会以函数的形式被视作外部依赖/引用(externals)。
#
Babel许多开发人员在他们的项目中使用 Babel ,以便他们可以使用未被浏览器和 Node.js 支持的将来版本的 JavaScript 特性。
使用 Babel 和 Rollup 的最简单方法是使用 rollup-plugin-babel 。 安装它:
添加到 Rollup 配置文件 rollup.config.js
:
在 Babel 实际编译代码之前,需要进行配置。 创建一个新文件src/.babelrc
:
这个设置有一些不寻常的地方。首先,我们设置 "modules": false
,否则 Babel 会在 Rollup 有机会做处理之前,将我们的模块转成 CommonJS ,导致 Rollup 的一些处理失败。
其次,我们使用 external-helpers
插件,它允许 Rollup 在包的顶部只引用一次 helpers
,而不是每个使用它们的模块中都引用一遍(这是默认行为)。
第三,我们将 .babelrc
文件放在 src
中,而不是根目录下。 这允许我们对于不同的任务有不同的 .babelrc
配置,比如像测试,如果我们以后需要的话 - 通常为单独的任务单独配置会更好。
现在,在我们运行 rollup 之前,我们需要安装 latest
preset 和 external-helpers
插件
运行 Rollup 现在将创建一个 bundle 包... 实际上我们并没有使用任何ES2015特性。 我们来改变一下。 编辑 src / main.js
:
运行 Rollup npm run build
,检查打包后的 bundle :
#
GulpRollup 返回 gulp 能明白的 promises,所以集成是很容易的。
语法与配置文件非常相似,但属性分为两个不同的操作,对应于JavaScript API: