Rollup 官方声称是下一代 ES 模块打包工具. 现在有很多打包工具, 当然最为流行的是 webpack, 对于 Web 应用来说 Webpack 是不错的选择, 但是对于开发类库来说 Rollup 是一个不错的选择.
安装
同样通过 NPM 很容易, 我们也可以通过 Yarn 来安装
- NPM install --global rollup
- OR
- yarn global add rollup
使用
应用程序入口 main.JS
- // main.JS
- import foo from './foo.js';
- export default function () {
- console.log(foo);
- }
依赖模块 foo.JS
- // foo.JS
- export default 'hello world!';
构建
$ rollup src/main.JS -o bundle.JS -f cjs
上面的命令通过 -f 选项告诉编译器采用 CommonJS 方式构建输出到 bundle.JS 文件中去:
- 'use strict';
- var foo = 'hello world!';
- var main = function () {
- console.log(foo);
- };
- module.exports = main;
rollup.config.JS
对于复杂的构建, 有太多的选项需要配置, 这样一来通过命令行对我们来说太过复杂, 我们可以通过配置文件来描述打包的过程:
在项目根目录创建文件 rollup.config.JS
- // rollup.config.JS
- export default {
- input: 'src/main.js',
- output: {
- file: 'bundle.js',
- format: 'cjs'
- }
- };
通过命令 rollup -c Rollup 会执行上述配置.
插件
我们使用 rollup-plugin-JSON 插件来读取 JSON 文件.
安装插件
yarn add rollup-plugin-JSON -D
在代码中使用插件
- // src/main.JS
- import { version } from '../package.json';
- export default function () {
- console.log('version' + version);
- }
使用插件
- // rollup.config.JS
- import JSON from 'rollup-plugin-json';
- export default {
- input: 'src/main.js',
- output: {
- file: 'bundle.js',
- format: 'cjs'
- },
- plugins: [ JSON() ]
- };
编译结果:
- 'use strict';
- var version = "1.0.0";
- var main = function () {
- console.log('version' + version);
- };
- module.exports = main;
注意: 只有我们实际需要的数据 --name 和 devDependencies 和 package.JSON 中的其它数据被忽略了. 这是 tree-shaking 起了作用.
ES6
通常我们需要用高版本的语言来编写代码, Rollup 可以借助 rollup-plugin-babel 插件来完成:
安装插件及 babel
- yarn add rollup-plugin-babel -D
- yarn add babel-core babel-preset-env babel-preset-es2015 babel-preset-stage-2 -D
配置 rollup
- // rollup.config.JS
- import JSON from 'rollup-plugin-json';
- import babel from 'rollup-plugin-babel';
- export default {
- input: 'src/main.js',
- output: {
- file: 'bundle.js',
- format: 'cjs'
- },
- plugins: [
- JSON(),
- babel({
- exclude: 'node_modules/**'
- })
- ]
- };
配置 .babelrc
在项目根目录上增加配置 babel 配置文件:.babelrc
- {
- "presets": ["es2015", "stage-2"]
- }
这样一来, 你就可以编译 ES6 语法了.
总结
Rollup 使用起来非常简单, 另外它通过 Tree-shaking 技术去除无用代码, 让整个项目更佳的高效, 最后它是一个非常好的类库构建工具, 如果再借助 Jest 进行单元测试, 我们就非常好的开发 JS 类库了.
来源: http://www.jianshu.com/p/e33c37e00c4b