{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm i rollup

.
├── package.json
├── pnpm-lock.yaml
├── rollup.config.js
└── src
    ├── index.js
    └── util.js

// src/index.js
import { add } from "./util";
console.log(add(1, 2));
// src/util.js
export const add = (a, b) => a + b;
export const multi = (a, b) => a * b;
// rollup.config.js
// 以下注釋是為了能使用 VSCode 的類型提示
/**
 * @type { import('rollup').RollupOptions }
 */
const buildOptions = {
  input: ["src/index.js"],
  output: {
    // 產(chǎn)物輸出目錄
    dir: "dist/es",
    // 產(chǎn)物格式
    format: "esm",
  },
};
export default buildOptions;

{
  // rollup 打包命令，`-c` 表示使用配置文件中的配置
  "build": "rollup -c"
}

const add = (a, b) => a + b;
console.log(add(1, 2));

// rollup.config.js
/**
 * @type { import('rollup').RollupOptions }
 */
const buildOptions = {
  input: ["src/index.js"],
  // 將 output 改造成一個(gè)數(shù)組
  output: [
    {
      dir: "dist/es",
      format: "esm",
    },
    {
      dir: "dist/cjs",
      format: "cjs",
    },
  ],
};
export default buildOptions;

{
  input: ["src/index.js", "src/util.js"]
}
// 或者
{
  input: {
    index: "src/index.js",
    util: "src/util.js",
  },
}

// rollup.config.js
/**
 * @type { import('rollup').RollupOptions }
 */
const buildIndexOptions = {
  input: ["src/index.js"],
  output: [
    // 省略 output 配置
  ],
};
/**
 * @type { import('rollup').RollupOptions }
 */
const buildUtilOptions = {
  input: ["src/util.js"],
  output: [
    // 省略 output 配置
  ],
};
export default [buildIndexOptions, buildUtilOptions];

output: {
  // 產(chǎn)物輸出目錄
  dir: path.resolve(__dirname, 'dist'),
  // 以下三個(gè)配置項(xiàng)都可以使用這些占位符:
  // 1. [name]: 去除文件后綴后的文件名
  // 2. [hash]: 根據(jù)文件名和文件內(nèi)容生成的 hash 值
  // 3. [format]: 產(chǎn)物模塊格式，如 es、cjs
  // 4. [extname]: 產(chǎn)物后綴名(帶`.`)
  // 入口模塊的輸出文件名
  entryFileNames: `[name].js`,
  // 非入口模塊(如動(dòng)態(tài) import)的輸出文件名
  chunkFileNames: 'chunk-[hash].js',
  // 靜態(tài)資源文件輸出文件名
  assetFileNames: 'assets/[name]-[hash][extname]',
  // 產(chǎn)物輸出格式，包括`amd`、`cjs`、`es`、`iife`、`umd`、`system`
  format: 'cjs',
  // 是否生成 sourcemap 文件
  sourcemap: true,
  // 如果是打包出 iife/umd 格式，需要對(duì)外暴露出一個(gè)全局變量，通過 name 配置變量名
  name: 'MyBundle',
  // 全局變量聲明
  globals: {
    // 項(xiàng)目中可以直接用`$`代替`jquery`
    jquery: '$'
  }
}

{
  external: ['react', 'react-dom']
}

pnpm i @rollup/plugin-node-resolve @rollup/plugin-commonjs

// rollup.config.js
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
/**
 * @type { import('rollup').RollupOptions }
 */
export default {
  input: ["src/index.js"],
  output: [
    {
      dir: "dist/es",
      format: "esm",
    },
    {
      dir: "dist/cjs",
      format: "cjs",
    },
  ],
  // 通過 plugins 參數(shù)添加插件
  plugins: [resolve(), commonjs()],
};

npm i lodash

import { merge } from "lodash";
console.log(merge);

// rollup.config.js
import { terser } from 'rollup-plugin-terser'
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
export default {
  output: {
    // 加入 terser 插件，用來壓縮代碼
    plugins: [terser()]
  },
  plugins: [resolve(), commonjs()]
}

// build.js
const rollup = require("rollup");
// 常用 inputOptions 配置
const inputOptions = {
  input: "./src/index.js",
  external: [],
  plugins:[]
};
const outputOptionsList = [
  // 常用 outputOptions 配置
  {
    dir: 'dist/es',
    entryFileNames: `[name].[hash].js`,
    chunkFileNames: 'chunk-[hash].js',
    assetFileNames: 'assets/[name]-[hash][extname]',
    format: 'es',
    sourcemap: true,
    globals: {
      lodash: '_'
    }
  }
  // 省略其它的輸出配置
];
async function build() {
  let bundle;
  let buildFailed = false;
  try {
    // 1. 調(diào)用 rollup.rollup 生成 bundle 對(duì)象
    bundle = await rollup.rollup(inputOptions);
    for (const outputOptions of outputOptionsList) {
      // 2. 拿到 bundle 對(duì)象，根據(jù)每一份輸出配置，調(diào)用 generate 和 write 方法分別生成和寫入產(chǎn)物
      const { output } = await bundle.generate(outputOptions);
      await bundle.write(outputOptions);
    }
  } catch (error) {
    buildFailed = true;
    console.error(error);
  }
  if (bundle) {
    // 最后調(diào)用 bundle.close 方法結(jié)束打包
    await bundle.close();
  }
  process.exit(buildFailed ? 1 : 0);
}
build();

// watch.js
const rollup = require("rollup");
const watcher = rollup.watch({
  // 和 rollup 配置文件中的屬性基本一致，只不過多了`watch`配置
  input: "./src/index.js",
  output: [
    {
      dir: "dist/es",
      format: "esm",
    },
    {
      dir: "dist/cjs",
      format: "cjs",
    },
  ],
  watch: {
    exclude: ["node_modules/**"],
    include: ["src/**"],
  },
});
// 監(jiān)聽 watch 各種事件
watcher.on("restart", () => {
  console.log("重新構(gòu)建...");
});
watcher.on("change", (id) => {
  console.log("發(fā)生變動(dòng)的模塊id: ", id);
});
watcher.on("event", (e) => {
  if (e.code === "BUNDLE_END") {
    console.log("打包信息:", e);
  }
});

發(fā)生生變動(dòng)的模塊id: /xxx/src/index.js
重新構(gòu)建...
打包信息: {
  code: 'BUNDLE_END',
  duration: 10,
  input: './src/index.js',
  output: [
    // 輸出產(chǎn)物路徑
  ],
  result: {
    cache: { /* 產(chǎn)物具體信息 */ },
    close: [AsyncFunction: close],
    closed: false,
    generate: [AsyncFunction: generate],
    watchFiles: [
      // 監(jiān)聽文件列表
    ],
    write: [AsyncFunction: write]
  }
}