一、目的
当创建好自己的npm包后,当在包中包含多个模块,不同的功能时,如果全量引入会包含很多不必要的代码不必要的模块,会使项目体积变大,这个时候就需要按需加载了。或者在创建多个npm包存放不同的功能模块,但是这样的话拆分的很细会使维护变得很麻烦,使用时也不是很方便。
在这里使用了rollup和gulp进行将不同功能的模块进行整合打包,进而方便进行按需加载。
二、rollup
1、rollup
rollup是javascript模块打包器,可以将各个小模块整合打包。
rollup中文文档 (版本比较旧)
rollup英文文档
rollup github
2、安装
- 全局安装rollup
npm i rollup -g
- 在项目当中引入rollup
npm i rollup -D
3、创建config文件
- 创建rollup.config.js文件
- 需要export default 默认的配置文件
- 例:
export default {
input: 'src/plugins/common.js',
output: {
file: 'lib/common.min.js', //打包后存放的文件
format: 'cjs' //输出格式 amd es6 iife umd cjs
},
plugins: [
getBabelOutputPlugin({
presets: ['@babel/preset-env'],
}),
nodeResolve({
browser: true,
preferBuiltins: true,
}),// 查找包路径
commonjs(), // 支持commonjs的插件
terser(), // 压缩代码的插件
],
}
- input 入口文件
- output 需要定义打包后文件的存放地址 还需要定义文件的输出格式
output: {
file:'lib/common.min.js', //打包后存放的文件
format: 'cjs' //输出格式 "amd", "cjs", "es", "iife" or "umd"
// 1. `iife`: 自执行函数, 可通过 `<script>` 标签加载
// 2. `amd`: 浏览器端的模块规范, 可通过 RequireJS 可加载
// 3. `cjs`: Node 默认的模块规范, 可通过 Webpack 加载
// 4. `umd`: 兼容 IIFE, AMD, CJS 三种模块规范
// 5. `es`: ES module 规范, 可用 Webpack, Rollup 加载
}
- plugins 定义打包时所需要的模块
import commonjs from “@rollup/plugin-commonjs”;
在plugins中: commonjs()
使在项目中import的ES模块可以被正常加载
import nodeResolve from “@rollup/plugin-node-resolve”;
在plugins中: nodeResolve ()
使在项目中用到的node_modules能够被正常加载
import {terser} from ‘rollup-plugin-terser’
在plugins中: terser()
压缩代码
import json from “@rollup/plugin-json”;
在plugins中: json()
使在项目中import的JSON文件可以被正常加载
import { getBabelOutputPlugin } from ‘@rollup/plugin-babel’;
在plugins中:
getBabelOutputPlugin({
presets: [‘@babel/preset-env’],
}),
使用babel,提高代码兼容性
更多的plugins 详看 rollup plugins github
4、运行rollup
- 在cmd中运行 rollup -c
- 或者在cmd中运行 rollup --config [config文件 | rollup.config.js]
5、rollup多个文件
- 可以在rollup.config.js文件中进行配置
- 例:
export default [
input: 'src/plugins/common.js',
output: {
file: 'lib/common.min.js', //打包后存放的文件
format: 'cjs' //输出格式 amd es6 iife umd cjs
},
plugins: [
getBabelOutputPlugin({
presets: ['@babel/preset-env'],
}),
nodeResolve({
browser: true,
preferBuiltins: true,
}),// 查找包路径
commonjs(), // 支持commonjs的插件
terser(), // 压缩代码的插件
],
...
]
6、优化
- 当在文件中会引入外部的一些文件时,这些文件可能会很大,会造成打包后的文件代码很大。这种情况下可以使用 gulp 将外部文件移动到打包后的文件夹下边
需要保持目录接口,防止引用文件找不到。
gulp 讲解详见下一章