Rollup 是一个 JavaScript 模块打包器,说到模块打包器,自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器,那么在 webpack 已经成为前端构建主流的今天,为什么还要用 Rollup 呢?
Rollup 中文文档 中介绍到,它可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。可以看到它的应用场景之一,就是打包 JS 库。自己写个 JS 库,在我们开发工作中和开源项目中还是比较常见的。可谓是生命不息,造轮子不止。如果还没写过,那就赶紧来提升下自己的技(逼)术(格)吧。
用过 webpack 的都知道,它可以将所有的静态资源,导入到应用程序中,也是因为它强大的功能,所以打包 bundle 文件时,会产生很多冗余的代码,在大型的应用中,这点冗余代码就会显得微不足道,但是在一个小小的库中,就会显得比较明显了。比如这么一个类:
class People{
constructor(){
this.name = 'linxin'
}
getName(){ return this.name; }
}
export default People;
经过 webpack 打包之后,变成下面这样(案例移除了具体内容),多出了很多方法,这显然不是我们想要的。
/******/ (function(modules) { // webpackBootstrap
/******/ var installedModules = {};
/******/ function __webpack_require__(moduleId) { **** }
/******/ __webpack_require__.m = modules;
/******/ __webpack_require__.c = installedModules;
/******/ __webpack_require__.d = function(exports, name, getter) { *** };
/******/ __webpack_require__.r = function(exports) { *** };
/******/ __webpack_require__.t = function(value, mode) { *** };
/******/ __webpack_require__.n = function(module) { *** };
/******/ __webpack_require__.o = function(object, property) { *** };
/******/ __webpack_require__.p = "";
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/******/ ([ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__);
class People{
constructor(){
this.name = 'linxin'
}
getName(){
return this.name;
}
}
/* harmony default export */ __webpack_exports__["default"] = (People); }) ]);
而 Rollup 打包之后的代码跟源码基本一致,作为一个 JS 库,我们还是希望简洁一点,代码量少点。毕竟实现相同的功能,谁都不想去引入一个更繁重的库吧。
Rollup 使用 ES6 的模块标准,而不像 CommonJS 和 AMD,虽然也叫模块化,其实只是一种临时的解决方案。Rollup 的模块可以使我们开发时可以独立的开发每个小模块,代码小而简单,更加方便测试每个小模块,在构建时才打包成一个完成的 JS 库。
tree shaking 指的是移除 JavaScript 上下文中的未引用代码,它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。静态结构的 import 就好像是变量引用一样,不需要执行代码,在编译时就可以确定它是否有引用到,如果没引用,就不把该段代码打包进来。比如用到了一个第三方库的一个功能,但我肯定不要把它完整的库都打包进来,我只需要打包用到的代码即可,这时候 tree shaking 就可以发挥出它的作用了。
开发一个 JS 库,我需要 Rollup 能为我提供些常用的功能:
Rollup 使用一个 rollup.config.js 文件进行配置。
// rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'umd'
}
};
配置跟其他工具基本一致,从入口文件 index.js 打包后输出文件 bundle.js。format 是生成包的格式,可选有 amd,cjs,es,iife,umd,umd 是通用模块定义,打包后可以通过 <script> 标签引入,也可以通过 import 等方式引入,作为一个 JS 库要适用各个场景,应选择 umd 。
Rollup 通过插件在打包的关键过程中更改行为,babel的插件就是 rollup-plugin-babel,需要先安装相关依赖
npm i rollup-plugin-babel@latest @babel/core @babel/preset-env -D
新建 .babelrc 文件,配置 babel
{
"presets": ["@babel/preset-env"]
}
npm i rollup-plugin-uglify -D
因为 rollup-plugin-uglify 无法压缩 ES6 的语法,所以必须先用 babel 转。如果想直接压缩 ES6 的语法,可换成 rollup-plugin-terser
开发一个 JS 库,不能乱七八糟,随心所欲的写代码,必须规范起来,当别人为你的开源库做贡献时,也必须遵循你的开发规范。安装 ESLint 插件
npm i rollup-plugin-eslint -D
然后初始化生成一个 ESLint 配置文件 ./node_modules/.bin/eslint --init
那么最终的 rollup.config.js 配置文件如下:
import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';
import { eslint } from "rollup-plugin-eslint";
export default {
input: './index.js',
output: {
file: 'dist/bundle.js',
name: 'People',
format: 'umd'
},
plugins: [
eslint({
fix: true,
exclude: 'node_modules/**'
}),
babel({
exclude: 'node_modules/**'
}),
uglify()
]
};
如果使用 TypeScript 进行开发,则需要安装 rollup-plugin-typescript2 插件和相关依赖
npm i rollup-plugin-typescript2 typescript -D
然后初始化生成一个 tsconfig.js 配置文件 tsc --init,那么使用 TypeScript 的打包文件如下:
import typescript from 'rollup-plugin-typescript2';
export default {
input: './index.ts',
output: {
file: 'dist/bundle.js',
name: 'People',
format: 'umd'
},
plugins: [
typescript()
]
}
除了以上用的这些插件之外,还有一些可能根据项目需求也有需要
以上只是介绍了 Rollup 的一些基本用法,更多的请参考官方文档。Rollup 已被许多主流的 JavaScript 库使用,包括 vue 和 react。它也可用于构建绝大多数应用程序,但是代码拆分和运行时态的动态导入这类高级功能,它还不能支持,如果需用这些功能,那就可以使用 webpack。案例可查看:sChart.js
rollup是一款小巧的javascript模块打包工具,更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化
其实用 webpack 也可以打包库,不过根据create-react-app项目贡献者的说法:rollup适合发布 js 库,而webpack更适合做应用程序。简而言之就是:rollup 打包 js 比 webpack 方便,而 webpack 打包 css 比 rollup 方便,相信大家已经有所了解
目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。
rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,其源码中模块的导入导出采用的是ES6模块语法,即源码需要采用ES6语法进行编写。
业务线长期的积累产生了许许多多重复性的工具方法,业务功能模块等, 我们正好可以用 rollup 构建一个 npm 私服工具包,便于后期业务使用,减少重复性的代码编写。
Rollup 是一个 JavaScript 模块打包器,它将小块的代码编译并合并成更大、更复杂的代码,比如打包一个库或应用程序。它使用的是 ES Modules 模块化标准,而不是之前的模块化方案
打包工具的作用是,将多个 JavaScript 脚本合并成一个脚本,供浏览器使用。浏览器需要脚本打包,主要原因有三个。rollup.js 的开发本意,是打造一款简单易用的 ES 模块打包工具,不必配置,直接使用。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!