什么是Rollup
rollup.js是Javascript的ES模块打包器，我们熟知的Vue、React等诸多知名框架或类库都通过rollup.js进行打包。与Webpack偏向于应用打包的定位不同，rollup.js更专注于Javascript类库打包（虽然rollup.js也可以提供资源打包，但显然这不是它的强项）。在我们学习Vue和React等框架源码或者自己编写Javascript类库时，rollup.js是一条必经之路。
Rollup 的好处
- Tree Shaking: 自动移除未使用的代码, 输出更小的文件
- Scope Hoisting: 所有模块构建在一个函数内, 执行效率更高
- Config 文件支持通过 ESM 模块格式书写
- 可以一次输出多种格式:IIFE, AMD, CJS, UMD, ESM
- Development 与 production 版本: .js, .min.js
- 文档精简
基础插件
- rollup-plugin-alias: 提供 modules 名称的 alias 和 reslove 功能.
- rollup-plugin-babel: 提供 Babel 能力, 需要安装和配置 Babel (这部分知识不在本文涉及)
- rollup-plugin-eslint: 提供 ESLint 能力, 需要安装和配置 ESLint (这部分知识不在本文涉及)
- rollup-plugin-node-resolve: 解析 node_modules 中的模块
- rollup-plugin-commonjs: 转换 CJS -> ESM, 通常配合上面一个插件使用
- rollup-plugin-replace: 类比 Webpack 的 DefinePlugin , 可在源码中通过 process.env.NODE_ENV 用于构建区分 Development 与 Production 环境.
- rollup-plugin-filesize: 显示 bundle 文件大小
- rollup-plugin-uglify: 压缩 bundle 文件
- rollup-plugin-serve: 类比 webpack-dev-server, 提供静态服务器能力
安装和使用
安装
npm i rollup -g
配置 script 命令
{
"clean": "rimraf dist",
"start": "yarn run clean && cross-env NODE_ENV=development rollup -w -c scripts/rollup.config.dev.js",
"build": "yarn run clean && cross-env NODE_ENV=production rollup -c scripts/rollup.config.prod.js",
}
rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { eslint } from 'rollup-plugin-eslint';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';
const packages = require('./package.json');
const ENV = process.env.NODE_ENV;
const paths = {
input: {
root: ENV === 'example'
? 'example/index.js'
: 'src/index.js',
},
output: {
root: ENV === 'example'
? 'example/dist/'
: 'dist/',
},
};
const fileNames = {
development: `${packages.name}.js`,
example: `example.js`,
production: `${packages.name}.min.js`
};
const fileName = fileNames[ENV];
export default {
input: `${paths.input.root}`,
output: {
file: `${paths.output.root}${fileName}`,
format: 'umd',
name: 'bundle-name'
},
plugins: [
resolve(),
commonjs(),
eslint({
include: ['src/**'],
exclude: ['node_modules/**']
}),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
}),
replace({
exclude: 'node_modules/**',
ENV: JSON.stringify(process.env.NODE_ENV),
}),
(ENV === 'production' && uglify()),
],
};
rollup vs webpack
webpack 的特点
诞生于2012年，目前Javascript社区使用得比较多的构建工具。它的出现，解决了当时的构建工具不能处理的问题——构建复杂的单页面应用(SPA)。它是一个强力的模块打包器。 所谓包(bundle)就是一个 JavaScript 文件，它把一堆资源(assets)合并在一起，以便它们可以在同一个文件请求中发回给客户端。 包中可以包含 JavaScript、CSS 样式、HTML 以及很多其它类型的文件。
- 代码分割
- loader 加载器
- 智能解析
- 插件系统
rollup
Rollup是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方，就是能让打包文件体积很小。这么说很难理解，更详细的解释：相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，比Webpack和Browserify使用的CommonJS模块机制更高效。这也让Rollup从模块中删除无用的代码，即tree-shaking变得更容易。
- 自动tree-shaking
- 支持的打包模式多
总结
webpack对于代码分割和静态资源导入有先天优势，支持热模块替换，rollup 不支持。但是 rollup 对于代码的 tree-shaking 和 es6模块有算法优势的支持。
开发应用用 webpack 开发库的时候 rollup
