JavaScript 中如何使用 Rollup 进行模块打包？

推荐答案

// www.javascriptcn.com code example
// 1. 安装 Rollup
npm install --save-dev rollup

// 2. 创建 Rollup 配置文件 rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife', // 输出格式 (iife, cjs, esm, umd, amd)
    name: 'MyBundle', // 全局变量名
    sourcemap: true // 生成 sourcemap
  },
  plugins: [
    resolve(), // 解析 node_modules 中的模块
    commonjs(), // 将 CommonJS 模块转换为 ES6 模块
    babel({ babelHelpers: 'bundled' }) // 使用 Babel 转换代码
  ]
};

// 3. 运行 Rollup
npx rollup -c

本题详细解读

1. 安装 Rollup

首先，你需要在项目中安装 Rollup。可以通过 npm 或 yarn 来安装：

npm install --save-dev rollup

2. 创建 Rollup 配置文件

Rollup 需要一个配置文件来指定入口文件、输出文件、输出格式以及使用的插件。通常这个文件命名为 rollup.config.js。

• input: 指定入口文件路径。
• output: 指定输出文件的路径、格式、全局变量名以及是否生成 sourcemap。
• plugins: 配置 Rollup 插件，常用的插件包括：
  • @rollup/plugin-node-resolve: 用于解析 node_modules 中的模块。
  • @rollup/plugin-commonjs: 将 CommonJS 模块转换为 ES6 模块。
  • @rollup/plugin-babel: 使用 Babel 转换代码。

3. 运行 Rollup

配置完成后，可以通过以下命令运行 Rollup 进行打包：

npx rollup -c

-c 参数表示使用配置文件 rollup.config.js。打包后的文件将输出到 dist/bundle.js。