使用Rollup打包JavaScript

rollup是一款小巧的javascript模块打包工具，更适合于库应用的构建工具;能够将小块代码编译成大块复杂的代码，基于ES6 modules,它可让你的 bundle 最小化，有效减小文件请求大小,vue在开发的时候用的是webpack,可是最后将文件打包在一块儿的时候用的是 rollup.js

首次发表在我的博客

• rollup官方文档
• rollupGithub

全局安装

npm install --global rollup
复制代码

开始使用rollup

建立第一个bundle

建立main.js

console.log(111);
复制代码

执行 rollup --input main.js --output bundle.js --format cjs, 该命令编译 main.js 生成 bundle.js, --format cjs 意味着打包为 node.js 环境代码, 请观察 bundle.js 文件内容

'use strict'
console.log(111);
复制代码

命令行参数简介:

输入(input -i/--input)

String 这个包的入口点 (例如：你的 main.js 或者 app.js 或者 index.js)

文件(file -o/--output.file) String 要写入的文件。也可用于生成 sourcemaps，若是适用

格式(format -f/--output.format) 关于format选项 rollup提供了五种选项:

• amd – 异步模块定义，用于像RequireJS这样的模块加载器
• cjs – CommonJS，适用于 Node 和 Browserify/Webpack
• es – 将软件包保存为ES模块文件
• iife – 一个自动执行的功能，适合做为<script>标签。（若是要为应用程序建立一个捆绑包，您可能想要使用它，由于它会使文件大小变小。）
• umd – 通用模块定义，以amd，cjs 和 iife 为一体

使用配置文件

rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};
复制代码

执行 rollup -c rollup.config.js启动配置项;

rollup 提供了 --watch / -w 参数来监听文件改动并自动从新打包

使用rollup插件

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

复制代码

咱们用的是 --save-dev 而不是 --save，由于代码实际执行时不依赖这个插件——只是在打包时使用。

在配置文件中启用插件

import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    plugins: [
        json(),
    ],
}
复制代码

新建文件 data.json

{
    "name": "xiaoming",
    "age": 12
}
复制代码

在main.js 引入 data.json

import { name } from './data.json';
console.log(name);
复制代码

执行 rollup -c rollup.config.js,并查看 bundle.js

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(factory());
}(this, (function () { 'use strict';

var name = "xiaoming";

console.log(name);

})));

复制代码

看到bundle中仅引用了data.json中的name字段,这是由于rollup会自动进行 Tree-shaking,main.js中仅引入了name,age并无没引用,因此age并不会被打包

rollup基础插件

• rollup-plugin-alias: 提供modules名称的 alias 和reslove 功能
• rollup-plugin-babel: 提供babel能力
• rollup-plugin-eslint: 提供eslint能力
• rollup-plugin-node-resolve: 解析 node_modules 中的模块
• rollup-plugin-commonjs: 转换 CJS -> ESM, 一般配合上面一个插件使用
• rollup-plugin-serve: 类比 webpack-dev-server, 提供静态服务器能力
• rollup-plugin-filesize: 显示 bundle 文件大小
• rollup-plugin-uglify: 压缩 bundle 文件
• rollup-plugin-replace: 类比 Webpack 的 DefinePlugin , 可在源码中经过 process.env.NODE_ENV 用于构建区分 Development 与 Production 环境.

rollup于其余工具集成

打包npm 模块

于webpack和Browserify不一样, rollup 不会去寻找从npm安装到你的node_modules文件夹中的软件包; rollup-plugin-node-resolve 插件能够告诉 Rollup 如何查找外部模块

npm install --save-dev rollup-plugin-node-resolve
复制代码

打包 commonjs模块

npm中的大多数包都是以CommonJS模块的形式出现的。 在它们更改以前，咱们须要将CommonJS模块转换为 ES2015 供 Rollup 处理。 rollup-plugin-commonjs 插件就是用来将 CommonJS 转换成 ES2015 模块的。 请注意，rollup-plugin-commonjs应该用在其余插件转换你的模块以前 - 这是为了防止其余插件的改变破坏CommonJS的检测

npm install --save-dev rollup-plugin-commonjs
复制代码

使用babel

使用 Babel 和 Rollup 的最简单方法是使用 rollup-plugin-babel

npm install --save-dev rollup-plugin-babel
复制代码

新建.babelrc

{
    "presets": [
        ["latest", {
            "es2015": {
                "modules": false
            }
        }]
    ],
    "plugins": ["external-helpers"]
}
复制代码

• 首先，咱们设置"modules": false，不然 Babel 会在 Rollup 有机会作处理以前，将咱们的模块转成 CommonJS，致使 Rollup 的一些处理失败
• 咱们使用external-helpers插件，它容许 Rollup 在包的顶部只引用一次 “helpers”，而不是每一个使用它们的模块中都引用一遍（这是默认行为） 运行 rollup以前, 须要安装latest preset 和external-helpers插件

npm i -D babel-preset-latest babel-plugin-external-helpers
复制代码

一个简单的配置项

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    watch: {
        exclude: 'node_modules/**'
    },
    plugins: [
        resolve(),
        commonjs(),
        json(),
        babel({
            exclude: 'node_modules/**',
            plugins: ['external-helpers'],
        }),
    ],
}
复制代码

rollup优点

• 自动 Tree-shaking(Tree-shaking, 也被称为 "live code inclusion," 它是清除实际上并无在给定项目中使用的代码的过程，可是它能够更加高效。)
• 打包速度快
• 配置简单

rollup VS webpack

rollup更适合构建javascript库,也可用于构建绝大多数应用程序;可是rollup 还不支持一些特定的高级功能，尤为是用在构建一些应用程序的时候，特别是代码拆分和运行时态的动态导入 dynamic imports at runtime.若是你的项目中须要这些功能,则使用webpack更为适合;