Rollup 与 Parcel

0x01 Rollup

（1）简介

  • 官网：https://rollupjs.org/

  • Rollup 是一个用于 JavaScript 的模块打包工具，将小的代码片段编译成更大、更复杂的代码

    • 如：库、应用程序

  • 与 Webpack 类似，但 Rollup 更加小巧

  • 特点：

    • Rollup 不支持 HMR（Hot Module Replacement，模块热替换）
    • Rollup 采用 ESM 标准，充分利用了 ESM 各项特性
    • Rollup 默认使用 Tree-shaking

  • 优点：

    • 输出结果扁平
    • 自动移除未引用的代码
    • 打包结果可读性高

  • 缺点：

    • 加载非 ESM 第三方模块复杂
    • 无法使用 HMR 优化开发体验
    • 浏览器环境中代码拆分依赖 AMD 库，如 RequireJS

  • 适用场景：开发自定义框架或自定义模块

（2）安装

  1. 使用命令 npm init -y 初始化 NodeJS 环境

  2. 准备文件

    1. src/apple.js

      export default {
  label: "an apple a day keeps the doctor away",
};

    2. src/calc.js

      export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;

    3. src/index.js

      import apple from "./apple";
import { add } from "./calc";

console.log(apple.label);
console.log(add(1, 2));

  3. 使用命令 npm install --save-dev rollup 安装 Rollup

  4. 使用命令 npx rollup ./src/index.js --format iife --file dist/bundle.js 将 src/index.js 以 IIFE 格式打包到 dist/bundle.js 文件中

（3）配置文件

  1. ./rollup.config.js

    export default {
  input: "src/index.js", // 输入文件
  output: {
    file: "dist/bundle.js", // 输出文件
    format: "iife", // 输出格式，如 iife-立即执行函数
  },
};

  2. 使用命令 npx rollup --config rollup.config.js 或 npx rollup --config 执行打包

（4）使用插件

插件是 Rollup 唯一的扩展方式

举例：使用插件实现在代码文件中导入 JSON 文件

  1. 使用命令 npm install --save-dev rollup-plugin-json 安装插件

  2. ./rollup.config.js

    import json from "rollup-plugin-json";

export default {
  // ...
  plugins: [json()], // 导入插件
};

  3. src/index.js

    import { name } from "../package.json";

console.log(name);

  4. 使用命令 npx rollup --config 打包

（5）使用模块

  • Rollup 默认只能按照文件路径的方式加载本地的文件模块

a. NPM

需要使用 rollup-plugin-node-resolve 实现导入 NPM 模块

  1. 使用命令 npm install --save-dev rollup-plugin-node-resolve 安装插件

  2. ./rollup.config.js

    import nodeResolve from "rollup-plugin-node-resolve";

export default {
  // ...
  plugins: [nodeResolve()],
};

  3. 使用命令 npm install --save lodash-es 安装 ES 规范的 Lodash（用于演示，可以替换为其他包）

  4. src/index.js

    import { camelCase } from "lodash-es";

console.log(camelCase("hello world"));

  5. 使用命令 npx rollup --config 打包

b. CJS

需要使用 rollup-plugin-commonjs 实现导入 CJS 模块

  1. 使用命令 npm install --save-dev rollup-plugin-commonjs 安装插件

  2. ./rollup.config.js

    import commonjs from "rollup-plugin-commonjs";

export default {
  // ...
  plugins: [commonjs()],
};

  3. 使用命令 npm install --save lodash-es 安装 Lodash（用于演示，可以替换为其他包）

  4. src/cjs.module.js

    module.exports = {
  name: "apple",
  label: "an apple a day keeps the doctor away",
  description: "apple description",
};

  5. src/index.js

    import cjsModule from "./cjs.module";

console.log(cjsModule);

  6. 使用命令 npx rollup --config 打包

（6）代码拆分

  • 代码拆分可以理解为按需导入或分包

  • Rollup 中不支持使用 IIFE 标准直接实现代码拆分，需要使用 AMD 标准

    • Webpack 打包时使用了引导代码实现了在 IIFE 中进行代码拆分

  • 示例：

    1. src/index.js

      import("./apple").then((result) => console.log(result));

import("./calc").then((result) => console.log(result.sub(3, 2)));

    2. ./rollup.config.js

      export default {
  input: "src/index.js",
  output: {
    dir: "dist",
    format: "amd",
  },
};

    3. 使用命令 npx rollup --config 打包

（7）多入口打包

多入口打包涉及代码拆分，需要使用 AMD 标准

  1. 准备文件

    1. src/index_1.js

      import { add } from "./calc";

console.log(add(1, 2));

    2. src/index_2.js

      import { sub } from "./calc";

console.log(sub(3, 2));

  2. ./rollup.config.js

    export default {
  input: ["src/index_1.js", "src/index_2.js"],
  output: {
    dir: "dist",
    format: "amd",
  },
};

  3. 使用命令 npx rollup --config 打包

0x02 Parcel

（1）简介

  • 官网：https://parceljs.org/
  • Parcel 是一个零配置的前端应用打包工具
  • Parcel 打包速度比 Webpack 更快
    • Parcel 采用多进程进行打包工作，Webpack 中需要通过 happypack 插件实现

（2）安装

  1. 使用命令 npm init -y 初始化 NodeJS 环境

  2. 准备文件

    1. src/js/calc.js

      export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;

    2. src/js/main.js

      import { add } from "./calc";

document.getElementById("title").textContent = add(1, 2);

    3. src/index.html

      <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h1 id="title"></h1>
  <script src="js/main.js"></script>
</body>

</html>

  3. 使用命令 npm install --save-dev parcel-bundler 安装 Parcel

  4. 使用命令 npx parcel src/index.html 打包并开启开发服务器
    （使用命令 npx parcel build src/index.html 构建）

  5. 访问 http://localhost:1234/

（3）特性

  • 支持热更新

    // src/main.js
// ...

// 允许热更新时触发
if (module.hot) {
  // 执行热更新时触发
  module.hot.accept(() => {
    console.log("[HMR] accepted");
  });
}

  • 支持自动安装所需依赖，即导入存在但未安装的模块时，Parcel 会自动检测并自动安装

  • 支持加载不同类型的资源文件，且无需安装额外的插件

  • 支持动态导入

  • 支持代码压缩

  • 支持 SourceMap

-End-

posted @ 2025-04-01 12:41  SRIGT  阅读(54)  评论(0)    收藏  举报