Rollup
yuhuo2022-11-26开发库工具库
参考链接
引入
安装
# 安装 rollup
pnpm install -D rollup
# 安装 Typescript 支持
pnpm install -D typescript @rollup/plugin-typescript
运行
package.json
{
"scripts": {
// -w 监控模式,代码变化就会重新打包
"dev": "rollup -c -w",
// --environment 传环境变量
"build-global": "rollup -c --environment target:global",
},
}
配置
配置文件默认根目录下 rollup.config.js
import typescript from "@rollup/plugin-typescript";
// 获取环境变量
const target = process.env.target;
// 输出配置文件
export default {
// 打包入口
input: "./packages/vue/src/index.ts",
// 打包出口
output: [
// ES6 模块化
{
file: `packages/vue/dist/vue.global-esm.js`,
format: "es",
},
// 立即执行函数，输出指定全局变量名
{
name: "vue",
file: `packages/vue/dist/vue.global.js`,
format: "iife",
},
],
// 引入插件
plugins: [
typescript(),
],
// 警告回调
onwarn: (msg, warn) => {
// 忽略循环引用警告
if (!/Circular/.test(msg)) {
warn(msg);
}
},
}
多入口
export default {
// 打包入口
input: {
"vue": "./packages/vue/src/index.ts",
"shared": "./packages/shared/src/index.ts"
},
output: [
// ES6 模块化
{
dir: "packages",
entryFileNames: `[name]/dist/[name].esm.js`,
format: "es",
},
// commonjs 模块化
{
dir: "packages",
entryFileNames: `[name]/dist/[name].cjs.js`,
format: "cjs",
},
],
// 设置不需要打包进来的包
external: ["dayjs"],
}
说明
一般来说打包分以下 2 种目标
- 浏览器：需要打包成1个文件，即
external为空，所有引用到的依赖都打包进来format: "es"format: "iife"
- npm：引用的外部依赖需要另外下载，
external需要列出所有外部依赖，让 rollup 不要打包进来format: "es"format: "cjs"