记Rollup构建Vue SDK

一、背景

基于需求需要对外提供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文件