一、背景
基于需求需要对外提供JS SDK组件，需要满足我们构建快、小巧、可使用Vue等场景。遂选用Rollup+Vue构建出SDK。
二、rollp.config.js配置
import { defineConfig } from 'rollup'
import resolve from '@rollup/plugin-node-resolve'
import path from "path";
import postcss from "rollup-plugin-postcss";
import { babel } from '@rollup/plugin-babel';
import alias from '@rollup/plugin-alias'
import vue from 'rollup-plugin-vue'
import commonjs from '@rollup/plugin-commonjs'
import terser from '@rollup/plugin-terser'
import serve from 'rollup-plugin-serve'
import replace from '@rollup/plugin-replace'
import livereload from 'rollup-plugin-livereload'
const isDev = process.env.NODE_ENV !== 'production';
module.exports = defineConfig([
{
input: 'src/index.js',
output: {
format: 'umd',
name: "__superbt__",
file: `dist/bankIconSuperbt.js`,
globals: {
vue: 'Vue',
},
inlineDynamicImports: true
},
plugins: [
alias({
entries: [{
find: '@',
replacement: path.resolve(__dirname, './src')
}]
}),
terser(),
vue({
css: true,
compileTemplate: true
}),
postcss({
extensions:['.css','.less']
}),
resolve({
browser: true,
}),
commonjs(),
babel({
exclude: 'node_modules/**',
babelHelpers: 'bundled',
extensions: [ '.mjs', '.jsx', '.es6', '.es', '.js', '.json', '.node', '.css', '.png', '.vue' ]
}),
replace({
preventAssignment: true,
'process.env.NODE_ENV': JSON.stringify('production')
}),
isDev && serve({
port: 80,
}),
isDev && livereload()
],
external: [
// /^vue(/.+|$)/,
],
}
])
babel配置 .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 1%, last 2 versions, not ie <= 8, ios >= 6, not dead",
"modules": false
}
]
],
"plugins": []
}
"scripts": {
"build": "NODE_ENV=production rollup -c rollup.config.js",
"dev": "NODE_ENV=develop rollup -c rollup.config.js -w"
},
yarn build //构建产物
yarn dev //搭配serve进行本地调试
三、配置详解
基本参数
input 入口
input 参数指向需要进行打包的入口文件路径，这是 Rollup 指明的唯一必不可少的参数。
打包到一起的所有的文件，都由这个入口文件开始，通过 ES Module、CommonJS 或其他引用方式，层层关联到一起。
output 输出
输出参数是一组配置，主要包含几个主要的参数：
file
指向打包最终生成的脚本文件路径。
注意，这里只是表示生成的 js 脚本文件。有时候，我们通过一些插件，比如 postcss 样式处理插件或 HTML 插件，可能会生成 .css 或 .html 文件，这些都不是 Rollup 自己干的
format
指定生成的目标脚本类型，包括如下几种：
•amd– AMD 模块，用于被 RequireJS 之类的加载器加载，现在用的人少了吧
•cjs– CommonJS 模块，用于 node 模块项目
•es– ES模块，通常用于组件或函数工具的分发
•iife– 自加载模块，一般用于立即执行函数或在浏览器中使用
•umd– 通用模块定义，同时支持amd和CommonJS加载，也可立即执行
•external
设置需要保留外部引用的模块。
external 参数可以设置为一个模块 id 列表数组。
来配置Vue相关是否要打包到SDK中
@rollup/plugin-node-resolve
插件可以让 Rollup 查找到外部模块
@rollup/plugin-commonjs
一些库暴露了可以按照原样导入的 ES 模块——the-answer就是这样的一种模块。但目前，大多数的 NPM 包暴露的都是 CommonJS 模块。在此更改之前，我们需要将 CommonJS 转换为 ES2015，这样 Rollup 才能处理它们。
请注意，@rollup/plugin-commonjs应该在其他插件之前使用——这是为了防止其他插件进行的更改破坏了 CommonJS 检测
@rollup/plugin-babel
Babel 和 Rollup 一起使用的最简单的方式是通过插件@rollup/plugin-babel
@rollup/plugin-terser
terser插件帮助我们在rollup.js打包过程中实现代码压缩
rollup-plugin-serve
在根目录新建index.html，通过本插件进行启动本地服务，在index.html引入本地打包后的产物进行调试。
rollup-plugin-livereload
代码修改后进行热更新。
我们希望通过上述代码验证以下功能：
1.replace插件：代码中的process被正确替换；
2.buble插件：将ES6+代码编译为ES2015；
3.alias插件：将模块中'@'别名替换为'src'目录；
4.commonjs插件：支持CommonJS模块；
5.resovle插件：合并外部模块代码；
6.terser插件：代码最小化打包。
7.vue插件：解析Vue文件
