rollup

VUE2 组件库

初始化项目

  • npm init -y
  • cnpm i -D rollup

安装常用插件

1
cnpm i -D rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel rollup-plugin-json rollup-plugin-vue@5 rollup-plugin-postcss @babel/core @babel/preset-env rollup-plugin-terser vue-template-compiler

注意：rollup-plugin-vue@5 适用于 Vue2，且需安装 vue-template-compiler。

配置

rollup.config.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const path = require('path')
const rollupResolve = require('rollup-plugin-node-resolve')
const rollupCommonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')

const resolve = dir => path.resolve(__dirname, dir)
const inputPath = resolve('./src/index.js')
const outputUmdPath = resolve('./dist/cxvh.datav.js')
const outputEsmPath = resolve('./dist/cxvh.datav.esm.js')

module.exports = {
  input: inputPath,
  output: [
    {
      file: outputUmdPath,
      format: 'umd',
      name: 'cxvhDatav',
      globals: {
        vue: "Vue"
      }
    },
    {
      file: outputEsmPath,
      format: 'esm',
      globals: {
        vue: "Vue"
      }
    }
  ],
  plugins: [
    vue({
      css: true,
      compileTemplate: true
    }),
    rollupResolve(),
    rollupCommonjs(),
    babel({
      exclude: 'node_modules/**'
    }),
    postcss({
      plugins: []
    })
  ],
  external: [
    "vue"
  ]
}

rollup.config.prod.js

1
2
3
4
5
const { terser } = require('rollup-plugin-terser')
plugins: [
  // ...其他插件...
  terser() // 压缩js
],

注意事项

  • rollup-plugin-vue 需指定 5.x 版本，且需安装 vue-template-compiler。
  • external 和 output.globals 配置同 Vue3。
  • Babel 配置与 Vue3 类似。

参考资料

VUE3 组件库

初始化项目

  • npm init -y
  • cnpm i -D rollup

安装常用插件

1
cnpm i -D rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel rollup-plugin-json rollup-plugin-vue rollup-plugin-postcss @babel/core @babel/preset-env rollup-plugin-terser

配置

rollup.config.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const path = require('path')
const rollupResolve = require('rollup-plugin-node-resolve')
const rollupCommonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')

const resolve = dir => path.resolve(__dirname, dir)
const inputPath = resolve('./src/index.js')
const outputUmdPath = resolve('./dist/cxvh.datav.js')
const outputEsmPath = resolve('./dist/cxvh.datav.esm.js')

module.exports = {
  input: inputPath,
  output: [
    {
      file: outputUmdPath,
      format: 'umd',
      name: 'cxvhDatav',
      globals: {
        vue: "Vue"
      }
    },
    {
      file: outputEsmPath,
      format: 'esm',
      globals: {
        vue: "Vue"
      }
    }
  ],
  plugins: [
    vue(),
    rollupResolve(),
    rollupCommonjs(),
    babel({
      exclude: 'node_modules/**'
    }),
    postcss({
      plugins: []
    })
  ],
  external: [
    "vue"
  ]
}

rollup.config.prod.js

1
2
3
4
5
const { terser } = require('rollup-plugin-terser')
plugins: [
  // ...其他插件...
  terser() // 压缩js
],

常用插件说明

  • rollup-plugin-node-resolve：支持第三方模块查找。
  • rollup-plugin-commonjs：将 CommonJS 模块转换为 ES6。
  • rollup-plugin-babel：集成 Babel 转码。
  • rollup-plugin-json：支持导入 JSON 文件。
  • rollup-plugin-vue：支持 .vue 文件打包。
  • rollup-plugin-postcss：处理 CSS。
  • rollup-plugin-terser：压缩代码（生产环境）。

打包命令

1
2
rollup -c rollup.config.prod.js      # 生产环境打包
rollup -wc rollup.config.dev.js      # 开发环境监听打包

常见问题

  • external 配置：如需外部化依赖（如 vue），需在 external 和 output.globals 同时声明。
  • Babel 配置：需在根目录添加 .babelrc，内容如下：
1
2
3
4
5
6
7
8
9
10
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}
  • 样式处理：如需支持 less/sass，可在 postcss 插件中配置相应插件。

参考资料