rollup 打包

我们在日常开发中会遇到各种各样，其中就有打包问题，长话短说：结论:rollup更适合打包库，webpack更适合打包项目，vite基于rollup实现了热更新也适合打包项目。

如何配置rollup打包

假设开发场景下：

// import os from "os";
// 使用babel插件 对语法进行降级
import babel from "@rollup/plugin-babel";
// Rollup 中处理ts文件的插件，将ts转成js
import typescript from "rollup-plugin-typescript2";
// 处理将ts声明文件
import { dts } from "rollup-plugin-dts";
// 处理CommonJS模块，并将其转换为ES6模块。
import commonjs from "rollup-plugin-commonjs";
// 将json文件转为js对象
import json from "rollup-plugin-json";
// 生成源映射文件，方便调试
import sourceMaps from "rollup-plugin-sourcemaps";
// 解析node模块插件
import resolve from "rollup-plugin-node-resolve";
// 压缩代码
import terser from "@rollup/plugin-terser";
// 替换代码中的变量
import replace from "@rollup/plugin-replace";
//  删除文件
import del from "rollup-plugin-delete";
import pkg from "./package.json" assert { type: "json" };
import path from "path";
import fs from "fs";
import os from "os";

const profix = "dist/";

// 打包文件迁移
function copyToolsCofig() {
  const fileList = [
    { from: "./package.json", to: "./dist/package.json" },
    { from: "./README.md", to: "./dist/README.md" },
  ];
  fileList.forEach((item) => {
    fs.copyFileSync(item.from, item.to);
  });
}
export default [
  {
    //打包入口文件
    input: "./src/index.ts",
    //打包出口文件
    output: [
      {
        // Node环境下使用
        file: profix + pkg.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        // 浏览器环境使用
        file: profix + pkg.module,
        format: "esm",
        sourcemap: true,
      },
      {
        // 通用环境使用
        file: profix + pkg.jsdelivr,
        format: "umd",
        name: "ts-sdk",
        sourcemap: false,
      },
    ],
    plugins: [
      del({
        targets: ["dist/lib"],
      }),
      json(),
      resolve(),
      typescript({
        tsconfig: path.resolve(__dirname, "./tsconfig.json"),
        useTsconfigDeclarationDir: true,
      }),
      commonjs(),
      // 语法降级,不要更换执行顺序,可能会导致打包失败
      babel({
        babelHelpers: "bundled",
        presets: [
          ["@babel/preset-env", { targets: { ie: "11" }, modules: false }],
        ],
        plugins: [
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-proposal-private-methods",
        ],
      }),
      sourceMaps(),
      terser({
        maxWorkers: os.cpus.length || 4,
        compress: {
          drop_console: true, // 移除console
        },
      }),
    ],
  },
  {
    input: profix + "src/index.d.ts",
    output: [
      {
        file: profix + pkg.types,
        format: "es",
      },
    ],
    plugins: [
      dts(),
      // 删除目标指定文件
      del({
        targets: ["dist/src"],
        hook: "buildEnd",
      }),
      copyToolsCofig(),
    ],
  },
];

结论

rollup打包速度快，但是配置麻烦，需要自己配置各种插件，webpack打包配置简单，但是打包速度慢，所以rollup更适合打包库，webpack更适合打包项目。 注意:rollup的插件都是单独安装，大体与webpack配置大同小异，配置方面也差不多。