【node】rollup使用

项目中使用的开源插件需要进行二次开发，插件源码生产环境使用rollup打包构建，学习了下rollup，记录下。

安装rollup

1
npm install -D rollup

rollup打包

package.json配置脚本

1
2
3
"scripts": {
  "build:lib": "rollup -c rollup.config.js"
},

配置文件

项目根目创建rollup.config.js

配置项

常用配置

详细配置参考官网

中文站：https://www.rollupjs.com/guide/big-list-of-options

英文官网：https://rollupjs.org/guide/en/#big-list-of-options

input

入口文件

1
2
3
{
  input: "./lib/index.js",
}

output

出口文件，当需要打多个js包时（xxx.js 与 xxx.min.js）传数组

file

要写入的文件

dir

放置所有生成的块的目录。如果生成多个块，则需要此选项。否则，可以使用file选项。

format

支持六种输出格式：amd / cjs /es / iife / umd / system(不常用，但官网有)

name

当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：
window[name值]=…

entryFileNames

打包资源名格式配置，默认[name].js，一共三种格式 format / hash:长度 / name

打包到块中的字符串，常用与顶部文档注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const { terser } = require("rollup-plugin-terser");

{
  output: [
    {
      dir: 'dist',
      name: "Roc",
      entryFileNames: 'roc.min.js',
      format: "umd",
      banner: "/** 文档注释... */",
      plugins: [
        terser()
      ], // 给这个出口文件 单独配置插件
    }
    // ...
  ]
}

external

告诉rollup不要将 某些库(下列示例：jquery) 打包，而作为外部依赖。

1
2
3
{
  external: ["jquery"]
}

globals

告诉 rollup jquery 是外部依赖，并且 jquery 模块的 ID 为全局变量 $

1
2
3
{
  "jquery": "$"
}

plugins

rollup插件配置，比如引入压缩代码插件

1
2
3
4
5
6
7
const { terser } = require("rollup-plugin-terser");

{
  plugins: [
    terser()
  ]
}

plugins配置，需要熟悉很多rollup插件的用途及配置。

rollup插件

记录使用到的插件，官方github或npm仓库链接地址中有详细配置说明。

@rollup/plugin-buble

https://github.com/rollup/plugins/tree/master/packages/buble/#readme

使用Buble编译器转换ES6+代码的插件。

@rollup/plugin-commonjs

https://github.com/rollup/plugins/tree/master/packages/commonjs/#readme

用于将CommonJS模块转换为ES6

@rollup/plugin-terser

https://github.com/rollup/plugins/tree/master/packages/terser#readme

Rollup插件，用于生成精简的js包（min.js）

rollup-plugin-javascript-obfuscator

https://www.npmjs.com/package/rollup-plugin-javascript-obfuscator

js代码混淆处理插件

@rollup/plugin-babel

https://github.com/rollup/plugins/tree/master/packages/babel#readme

用于Rollup和Babel之间的无缝集成。

@rollup/plugin-node-resolve

https://github.com/rollup/plugins/tree/master/packages/node-resolve/#readme

在node_modules中查找并捆绑第三方依赖项（使用后会将使用到的第三方依赖打包进来，不需要打包进来配合选项“external”使用）

@rollup/plugin-replace

https://github.com/rollup/plugins/tree/master/packages/replace#readme

打包时替换文件中的字符串

rollup-plugin-node-externals

https://github.com/Septh/rollup-plugin-node-externals#readme

在汇总配置中自动将NodeJS内置模块和npm依赖项声明为“external（外部）”

rollup-plugin-postcss

https://github.com/egoist/rollup-plugin-postcss#readme

Rollup和PostCSS之间的无缝集成。

rollup-plugin-visualizer

https://github.com/btd/rollup-plugin-visualizer

可视化并分析Rollup打包，以查看哪些模块正在占用空间。

rollup-plugin-vue

https://www.npmjs.com/package/rollup-plugin-vue

vue SFC（.vue文件）处理

rollup-plugin-typescript

https://github.com/rollup/rollup-plugin-typescript

ts处理 已更换为：@rollup/plugin-typescript 但是与vue3ts配合打包出错！
可与 rollup-plugin-vue 配合解析 vue3 SFC ts

vue-template-compiler

https://www.npmjs.com/package/vue-template-compiler

Vue 2.0模板编译器

@rollup/plugin-typescript

https://www.npmjs.com/package/@rollup/plugin-typescript

Rollup插件用于Rollup和Typescript之间的无缝集成。（依赖 tslib 模块 npm install -D tslib）

@babel/plugin-transform-class-properties

https://www.npmjs.com/package/@babel/plugin-transform-class-properties

用于将 ES2015 及更高版本的类属性（Class Properties）转换为 ES5 兼容的语法

@babel/plugin-transform-private-methods

https://www.npmjs.com/package/@babel/plugin-transform-private-methods

用于转换class私有类方法

rollup-plugin-copy

https://www.npmjs.com/package/rollup-plugin-copy

复制文件和文件夹

参考

react-redux官方rollup配置

react-redux库rollup配置文件：

https://github.com/reduxjs/react-redux/blob/master/rollup.config.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
51
52
53
54
55
import nodeResolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import replace from '@rollup/plugin-replace'
import commonjs from '@rollup/plugin-commonjs'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'

const env = process.env.NODE_ENV

const extensions = ['.js', '.ts', '.tsx', '.json']

const config = {
  input: 'src/index.ts',
  external: Object.keys(pkg.peerDependencies || {}).concat('react-dom'),
  output: {
    format: 'umd',
    name: 'ReactRedux',
    globals: {
      react: 'React',
      redux: 'Redux',
      'react-dom': 'ReactDOM',
    },
  },
  plugins: [
    nodeResolve({
      extensions,
    }),
    babel({
      include: 'src/**/*',
      exclude: '**/node_modules/**',
      babelHelpers: 'runtime',
      extensions,
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify(env),
      preventAssignment: true,
    }),
    commonjs(),
  ],
}

if (env === 'production') {
  config.plugins.push(
    terser({
      compress: {
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        warnings: false,
      },
    })
  )
}

export default config