Rollup 介绍
Rollup
是一个 JavaScript
模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup
对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6
版本中,而不是以前的特殊解决方案,如 CommonJS
和 AMD
。ES6
模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6
模块最终还是要由浏览器原生实现,但当前 Rollup
可以使你提前体验。
安装 rollup
npm i rollup -g
包管理器
// package.json
{
"name": "rollup-gitbook",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "rollup -c",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
配置文件
新建
rollup.config.js
-
rollup
支持es
,umd
,cjs
,system
,iife
,amd
- 其中
cjs
指的是commonjs
,iife
指的是立即执行函数
,umd
指的是cjs
和amd
的兼容模块
export default {
input: './src/index.js',
output: [
{
file: './dist/lib-umd.js',
format: 'umd',
name: 'myLib',
},
{
file: './dist/lib-es.js',
format: 'es',
},
{
file: './dist/lib-cjs.js',
format: 'cjs',
},
{
file: './dist/lib-system.js',
format: 'system',
},
{
file: './dist/lib-iife.js',
format: 'iife',
},
{
file: './dist/lib-amd.js',
format: 'amd',
},
],
// 插件配置在这里
plugin:[]
};
入口程序
新建
src
下的modules.js
// src/modules.js
const sayHelloRollup = () => {
console.log('sayHello,Rollup');
};
export { sayHelloRollup };
新建
src
下的index.js
import { sayHelloRollup } from './modules';
sayHelloRollup();
运行 npm run dev
这个时候我们就可以在 dist
文件夹下看到各种打包好的文件了
这时候看看区别
// lib-amd.js amd
define((function () { 'use strict';
const sayHelloRollup = () => {
console.log('sayHello,Rollup');
};
sayHelloRollup();
}));
// lib-cjs.js commonjs
'use strict';
const sayHelloRollup = () => {
console.log('sayHello,Rollup');
};
sayHelloRollup();
// lib-es.js es
const sayHelloRollup = () => {
console.log('sayHello,Rollup');
};
sayHelloRollup();
// lib-iife.js
// iife 写法
(function () {
'use strict';
const sayHelloRollup = () => {
console.log('sayHello,Rollup');
};
sayHelloRollup();
})();
// lib-system.js
System.register([], (function () {
'use strict';
return {
execute: (function () {
const sayHelloRollup = () => {
console.log('sayHello,Rollup');
};
sayHelloRollup();
})
};
}));
// lib-umd.js
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
})((function () { 'use strict';
const sayHelloRollup = () => {
console.log('sayHello,Rollup');
};
sayHelloRollup();
}));
项目具体路径
这里说下 webpack
和 rollup
的区别
-
webpack
由于年代相对久远,在commonjs
后且esMoudles
之前,所以通过webpack
通过自己来实现commonjs
等语法,rollup
则可以通过配置打包成想要的语法,比如esMoudles
这里看看
webpack
打包
// 看看代码中的define.amd 是不是有种 umd 那味了
!function(e,_){"object"==typeof exports&&"object"==typeof module?module.exports=_():"function"==typeof define&&define.amd?define([],_)
:"object"==typeof exports?exports.main=_():e.main=_()}(self,
(function(){return function(){"use strict";var __webpack_modules__={"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/vue/ElButton.vue?vue&type=script&lang=js&":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'el-button',\n props: {\n type: {\n type: String,\n default: function _default() {\n return 'primary';\n }\n },\n disabled: {\n type: String\n }\n },\n data: function data() {\n return {};\n }\n});\n\n//# sourceURL=webpack://webpack_project/./src/vue/ElButton.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options")},"./src/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__)...
// 剩下就没截图了
-
所以说
rollup
很适合打包成库
,而webpack
比较适合用来做来打包应用
-
由于
rollup
不能够直接读取node_modules
中的依赖项,需要引入加载npm模块的插件:rollup-plugin-node-resolve
-
由于
rollup
默认只支持esm
模块打包,所以需要引入插件来支持cjs
模块:rollup-plugin-commonjs
-
由于
rollup
通过可以esm
模块开发和打包,所以支持tree-shaking
模式 -
vite
就是rollup
开发而来的
插件
-
rollup
并没有webpack
的loader
, 只在rollup-config.js
中配置plugin:[]
的选项就可以了 -
关于插件之后主要讲下
rollup-plugin-common.js
和rollup-plugin-node-resolve
以及vue
相关plugin
关于 rollup-plugin-babel
(es6语法兼容) 和 rollup-plugin-terser
(代码压缩) 这里就不赘述了。
参考