携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

Rollup 配置文件使用

添加脚本命令

"scripts": {
  "build": "rollup",
},

打包输出多个格式

import json from "@rollup/plugin-json";
// 打包第三方库
import resolve from "@rollup/plugin-node-resolve";
// commonjs 模块转 esModule 模块进行打包
import commonjs from "@rollup/plugin-commonjs";
// 压缩代码
import { terser } from "rollup-plugin-terser";
export default [
  {
    input: "index.js",
    external: ["react"], // 指出应将哪些模块视为外部模块
    plugins: [resolve(), commonjs(), json()], // 插件是按顺序执行的
    output: {
      file: "dist/index.umd.js",
      format: "umd",
      name: "index",
      // plugins: [terser()], // 这里也可以使用插件，编译之后才执行的插件
      banner: "/** Hello This is Banner **/", // 在打包的文件，加注释声明
    },
  },
  {
    input: "index.js",
    external: ["react"],
    plugins: [resolve(), commonjs(), json()],
    output: {
      file: "dist/index.es.js",
      format: "es",
      name: "index",
      plugins: [terser()],
    },
  },
];

• output 也可以是数组

import json from "@rollup/plugin-json";
// 打包第三方库
import resolve from "@rollup/plugin-node-resolve";
// commonjs 模块转 esModule 模块进行打包
import commonjs from "@rollup/plugin-commonjs";
// 压缩代码
import { terser } from "rollup-plugin-terser";
export default [
  {
    input: "index.js",
    external: ["react"], // 指出应将哪些模块视为外部模块
    plugins: [resolve(), commonjs(), json()], // 插件是按顺序执行的
    output: [
      {
        file: "dist/index.umd.js",
        format: "umd",
        name: "index",
        // plugins: [terser()], // 这里也可以使用插件，编译之后才执行的插件
        banner: "/** Hello This is Banner **/", // 在打包的文件，加注释声明
      },
      {
        file: "dist/index.es.js",
        format: "es",
        name: "index",
        plugins: [terser()],
      },
    ],
  },
];

配置文件修改

一般建议整个配置文件作为数组,相同的配置声明变量

import json from "@rollup/plugin-json";
// 打包第三方库
import resolve from "@rollup/plugin-node-resolve";
// commonjs 模块转 esModule 模块进行打包
import commonjs from "@rollup/plugin-commonjs";
// 压缩代码
import { terser } from "rollup-plugin-terser";
const entry = "index.js";
const plugins = [resolve(), commonjs(), json()];
export default [
  {
    input: entry,
    external: ["react"], // 指出应将哪些模块视为外部模块
    plugins: plugins, // 插件是按顺序执行的
    output: {
      file: "dist/index.umd.js",
      format: "umd",
      name: "index",
      // plugins: [terser()], // 这里也可以使用插件，编译之后才执行的插件
      banner: "/** Hello This is Banner **/", // 在打包的文件，加注释声明
    },
  },
  {
    input: entry,
    external: ["react"],
    plugins: plugins,
    output: {
      file: "dist/index.es.js",
      format: "es",
      name: "index",
      plugins: [terser()],
    },
  },
];

Rollup 插件功能解析

• rollup 工作流程

Hook

根据运行的节点，主动调用插件对应阶段实现的功能

通用配置

• include
• exclude

官方插件

• alias
• babel
• replace

大部分 rollup 可以直接在 Vite 中使用

Hook

input 阶段 hook

• options() 最早执行的 hook，处理一些配置项
• buildStart(inputOptions) input 阶段 hook，代码执行之前，做一些处理
  • inputOptions rollup 整体的配置
• resolveId(importee, importer, resolveOptions) 模块id
  • importee 引入的 模块名称
  • importer 从哪个文件 import 了这个模块
• renderChunk(code,chunk,outputOptions) 处理代码
  • code 代码
• transform(code,filename) 处理代码编译
  • code 代码
  • filename 文件名字

output 阶段 hook

• renderStart(outputOptions) output 阶段 hook
  • outputOptions 输出对应的所有配置
• renderChunk(code,chunk,outputOptions) 处理代码
  • code 代码