前端工程化工具系列（十三）—— Rollup(v4.18.0)：专注于库构建的 JavaScript 打包器

1 安装

1.1 针对 JavaScript

pnpm add -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel rollup-plugin-postcss @rollup/plugin-terser

1.2 针对 TypeScript

在 JavaScript 基础上添加一些插件：

pnpm add -D rollup-plugin-typescript2

1.3 支持 Vue

pnpm add -D rollup-plugin-vue

1.4 其他插件

pnpm add -D  @rollup/plugin-json rollup-plugin-copy

2 配置

在项目根目录下创建 rollup.config.js 文件。

2.1 针对 JavaScript

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-underscore-dangle */

// 告诉 Rollup 如何查找外部模块
import resolve from '@rollup/plugin-node-resolve';
// 将 CommonJS 转换成 ES 模块
import commonjs from '@rollup/plugin-commonjs';
// 读取 Babel 配置
import { getBabelOutputPlugin } from '@rollup/plugin-babel';
// 压缩发布的js代码
import terser from '@rollup/plugin-terser';
// 处理 CSS 文件，将 CSS 文件放在js中
import postcss from 'rollup-plugin-postcss';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // 插件
  plugins: [
    commonjs(),
    resolve(),
    postcss({
      // 与ts同级同名 | 自定义文件名称、路径
      extract: true,
    }),
    getBabelOutputPlugin({
      allowAllFormats: true,
      configFile: path.resolve(__dirname, 'babel.config.json'),
    }),
    terser({
      compress:
      {
        drop_console: true,
        pure_funcs: ['console.log'], // 删除console.log
      },
    }),
  ],
  input: 'src/index.js',
  output: [
    {
      format: 'esm',
      file: 'dist/mylibrary.esm.js',
    },
    {
      name: 'MyLibrary',
      format: 'umd',
      file: 'dist/mylibrary.umd.js',
    },
  ],
};

2.2 针对 TypeScript

在 JS 配置的基础上添加：

// 支持typescript
import typescript from 'rollup-plugin-typescript2'; // 加上这一行

export default {
  // 插件
  plugins: [
    typescript2(), // 加上这一行
    getBabelOutputPlugin({
      ...
    }),
  ],
};

注意 tsconfig.json 一般为：

{
  "compilerOptions": {
    // 用来指定要使用的模板标准
    "module": "esnext",
    // 用于指定编译之后的版本
    "target": "esnext",
    // 用于选择模块解析策略，有"node"和"classic"两种类型
    "moduleResolution": "node",
    // 用于指定是否启动所有类型检查 严格模式
    "strict": true,
    // 用来指定是否允许编译JS文件
    "allowJs": true,
    // 用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载
    "typeRoots": [
      "./types",
      "./node_modules/vue/types"
    ],
  },
  // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
  "include": [
    "components/**/*",
    "./*.js",
    "./*.ts",
    "./*.cjs",
    "types/shims-vue.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

2.3 支持 Vue

// 支持vue文件
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable no-underscore-dangle */
// 支持vue文件
import vue from 'rollup-plugin-vue';
// 告诉 Rollup 如何查找外部模块
import resolve from '@rollup/plugin-node-resolve';
// 将 CommonJS 转换成 ES 模块
import commonjs from '@rollup/plugin-commonjs';
// 读取 Babel 配置
import { getBabelOutputPlugin } from '@rollup/plugin-babel';
// 压缩发布的js代码
import terser from '@rollup/plugin-terser';
// 处理 CSS 文件，将 CSS 文件放在js中
import postcss from 'rollup-plugin-postcss';
import path from 'path';
import { fileURLToPath } from 'url';
import typescript2 from 'rollup-plugin-typescript2';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // 插件
  plugins: [
    vue(),
    commonjs(),
    resolve(),
    postcss({
      // 与ts同级同名 | 自定义文件名称、路径
      extract: true,
    }),
    typescript2(),
    getBabelOutputPlugin({
      allowAllFormats: true,
      configFile: path.resolve(__dirname, 'babel.config.json'),
    }),
    terser({
      compress:
      {
        drop_console: true,
        pure_funcs: ['console.log'], // 删除console.log
      },
    }),
  ],
  input: 'index.ts',
  output: [
    {
      format: 'esm',
      file: 'dist/mycomponents.esm.js',
    },
    {
      name: 'MyComponents',
      format: 'umd',
      file: 'dist/mycomponents.umd.js',
    },
  ], // 指出应将哪些模块视为外部模块
  external: [
    'vue',
  ],
};