官网简介 : Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序
为什么说 Rollup 通常适用于打包JS类库 ？
- 通过 rollup 打包后的代码，相比与 webpack 打出来的包体积会更小，而且代码会更加简洁，不会有过多的冗余代码。
- rollup 也对 es 模块输出及 iife 格式打包有很好的支持
所以说 rollup 更适合构建一个组件库。rollup 和 webpack 的具体对比，本文章就不做扩展了。
编写一个 TypeSript 组件
组件采用 TypeScript 的形式开发，所以先搭建基础的 TypeScript 开发环境
npm init -yes // 生成基础的package.json
npm install -g typescript
tsc -init // 生成tsconfig.json
在根目录创建一个src 文件 并且创建一个 utils.ts 文件编写组件内容，此时的文件目录是这样的
rollupUtils
├── src
│ └── utils.ts
├── package.json
└── tsconfig.json
先随便编写一个组件，这里编写了一个设置和获取 cookie 的方法
/* utils.js */
export const setCookie = (key: string, value: string) => {
document.cookie = `${key}=${value};`;
};
export const getCookie = (key: string): string => {
const items: string[] = document.cookie.split('; ');
for (let i = 0; i < items.length; i += 1) {
const item: string[] = items[i].split('=');
if (key === item[0] && item.length === 2) {
return decodeURIComponent(item[1]);
}
}
return '';
};
修改一下 tsconfig 的配置
/* tsconfig.json */
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "esnext"],
"outDir": "lib",
"declaration": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react"
},
"include": ["src"]
}
// 附上配置文档： https://www.tslang.cn/docs/handbook/compiler-options.html
执行一下 tsc 命令，会根据 tsconfig.json 的配置进行编译 生成出一个 文件名为 lib 的包并将类型分离出来
使用 Rollup 构建 UMD 包
UMD 叫做通用模块定义规范（Universal Module Definition） 就是一种javascript通用模块定义规范，让你的模块能在javascript所有运行环境中发挥作用。
先安装一下 rollup 和解析 ts 的包
npm i -D rollup rollup-plugin-typescript2 typescript
在根目录创建一个 rollup.config.js
/* rollup.config.js */
import typescript from 'rollup-plugin-typescript2';
import { version } from './package.json';
export default {
input: 'src/utils.ts', // 入口文件
output: {
name: 'my_utils', // umd 模式必须要有 name 此属性作为全局变量访问打包结果
file: `dist/@${version}/index.js`,
format: 'umd',
sourcemap: true,
},
plugins: [
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: false, // 输出时去除类型文件
},
},
}),
],
};
执行 rollup -c 进行构建,
效果如下:
babel 编译
安装一系列的 babel 包
npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env @rollup/plugin-babel @babel/preset-typescript
创建 .babelrc 文件进行 babel 配置
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"loose": true,
"targets": {
"browsers": "> 1%, IE 11, not op_mini all, not dead",
"node": 8
}
}
],
["@babel/preset-typeScript"]
]
}
在 rollup.config.js 引入 babel
import { babel } from '@rollup/plugin-babel';
plugins:[
babel({
extensions: [".js", ".ts"],
exclude: "node_modules/**",
babelHelpers: 'bundled'
}),
]
执行 rollup -c 进行编译
lib 包是经过 tsc 命令 打包出来的 并没有经过 babel 的处理。顺便处理一下吧
npm install @babel/cli -D
先执行 tsc 生成 lib 包 再执行 babel 命令 babel lib --out-dir lib
压缩
安装一下 压缩插件
npm install -D rollup-plugin-terser
在 rollup.config.js 添加上插件
最终的 rollup.config.js
/* rollup.config.js */
import typescript from 'rollup-plugin-typescript2';
import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import { version } from './package.json';
export default {
input: 'src/utils.ts',
output: {
name: 'my_utils',
file: `dist/@${version}/index.js`,
format: 'umd',
sourcemap: true,
},
plugins: [
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: false,
},
},
}),
babel({
extensions: [".js", ".ts"],
exclude: "node_modules/**",
babelHelpers: 'bundled'
}),
terser(),
],
};
最后整理一下
删除 lib 文件夹 然后再执行 tsc 将 ts 文件 分离 xxx.d.ts 类型文件以及 js 文件 , 然后走一遍 babel 编译 lib 文件夹
执行 tsc 的目的是为了获取类型文件，若采用 TS 开发可引入此包
删除 dist 文件夹 再通过 rollup 打包出来 UMD 模式文件
这里再安利一个 插件 rimraf
重新打包的时候。需要把旧的打包文件删除，这里的用法也比较简单 rimraf <path> [<path> ...]
理清思路后 , 在package.json 下的 scripts 添加脚本
"build": "rimraf /lib/ && tsc && babel lib --out-dir lib && rimraf /dist/ && rollup -c"
接下来 执行一下 build 命令
校验结果:
在页面引入 <script src="dist/@1.0.0/index.js"></script>
my_utils 就是 rollup.config.js -> output 里面的 name 属性
最后贴一下 github 地址：github.com/Coffee-C/ro…
