rollup.js是Javascript的ES模块打包器,我们熟知的Vue、React等诸多知名框架或类库都通过rollup.js进行打包。与Webpack偏向于应用打包的定位不同,rollup.js更专注于Javascript类库打包(虽然rollup.js也可以提供资源打包,但显然这不是它的强项)。在我们学习Vue和React等框架源码或者自己编写Javascript类库时,rollup.js是一条必经之路。
npm i rollup -g
{
"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",
}
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()),
],
};
诞生于2012年,目前Javascript社区使用得比较多的构建工具。它的出现,解决了当时的构建工具不能处理的问题——构建复杂的单页面应用(SPA)。它是一个强力的模块打包器。 所谓包(bundle)就是一个 JavaScript 文件,它把一堆资源(assets)合并在一起,以便它们可以在同一个文件请求中发回给客户端。 包中可以包含 JavaScript、CSS 样式、HTML 以及很多其它类型的文件。
Rollup是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块,然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方,就是能让打包文件体积很小。这么说很难理解,更详细的解释:相比其他JavaScript打包工具,Rollup总能打出更小,更快的包。因为Rollup基于ES2015模块,比Webpack和Browserify使用的CommonJS模块机制更高效。这也让Rollup从模块中删除无用的代码,即tree-shaking变得更容易。
webpack对于代码分割和静态资源导入有先天优势,支持热模块替换,rollup 不支持。但是 rollup 对于代码的 tree-shaking 和 es6模块有算法优势的支持。 开发应用用 webpack 开发库的时候 rollup