Rollup 打包工具

1、 rollup 核心思想和场景

官方定义

Rollup是一个JavaScript的模块化打包工具，可以帮助我们编译小的代码到一个大的、复杂的代码中，比如一个库或者一个应用程序

Rollup定位及存在意义

Rollup是一个模块化的打包工具，主要是针对ES Module进行打包的

在早期webpack不支持tree shaking时，rollup具备更强的优势

rollup的配置和理念相对于webpack来说，更加的简洁和容易理解

通常会使用rollup对库文件进行打包时，（比如vue、react、dayjs源码本身、Vite底层）

2、 安装及简单配置

// 安装
npm i rollup -g

// 执行脚本
rollup src/index.js -f umd -o dist/bundle.js

-f：代码格式 `amd`、`cjs`、`esm`、`system`、`iife`、`umd`
-o：文件输出到 `dist` 目录下的 `bundle.js`
-c：指定 `rollup` 的配置文件
-w：监听源文件是否有改动，如果有改动，重新打包

pnpm add rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-peer-deps-external @rollup/plugin-terser -D

// 简单配置
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import external from "rollup-plugin-peer-deps-external";
const terser = require('@rollup/plugin-terser')

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: 'dist/utils.cjs.js', // 输出文件路径
      format: 'cjs', // 输出格式
      sourcemap: true, // 生成 sourcemap
    },
    {
      file: 'dist/utils.esm.js',
      format: 'es',
      sourcemap: true,
    },
    {
      file: 'dist/utils.umd.js',
      format: 'umd',
      name: 'Utils', // UMD 格式需要一个全局变量名
      sourcemap: true,
    },
    external: ['lodash'], // 外部依赖
  ],
  plugins: [
    // 解决引入第三方库报错问题
    // npm i -D @rollup/plugin-node-resolve
    resolve(),

    // 默认只支持 ES6+的模块方式、支持 CommonJS 的模块
    // npm i -D @rollup/plugin-commonjs
    commonjs(),

    // 转换高阶语法、.babelrc配置文件、详细请参考webpack的babel配置
    // npm i -D @rollup/plugin-babel  @babel/core @babel/preset-env
    babel(),

    // npm i -D @rollup/plugin-json
    json(),

    // 打包 node-modules 里面的内容
    resolve(),

    // terser压缩和混淆代码
    // npm install @rollup/plugin-terser -D
    terser()
  ],
  // 禁止打包某些类库、线上环境使用 CDN
  external: [
    "the-answer"
  ],
};