Rollup 的配置文件是什么？

推荐答案

Rollup 的配置文件通常是一个 JavaScript 文件，默认命名为 rollup.config.js。这个文件导出一个配置对象或一个返回配置对象的函数。配置对象包含了 Rollup 打包时所需的各种选项，例如入口文件、输出文件、插件、外部依赖等。

以下是一个简单的 rollup.config.js 示例：

// www.javascriptcn.com code example
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: 'cjs', // 输出格式 (commonjs)
    sourcemap: true // 生成 sourcemap
  },
  plugins: [
    resolve(), // 解析 node_modules 中的模块
    commonjs(), // 将 CommonJS 模块转换为 ES6 模块
    babel({ babelHelpers: 'bundled' }) // 使用 Babel 转换代码
  ],
  external: ['lodash'] // 外部依赖，不打包进 bundle
};

本题详细解读

配置文件的结构

Rollup 的配置文件是一个 JavaScript 文件，通常命名为 rollup.config.js。它导出一个配置对象或一个返回配置对象的函数。配置对象包含了 Rollup 打包时所需的各种选项。

主要配置项

1. input: 指定入口文件，通常是项目的入口 JavaScript 文件。
2. output: 配置输出文件的路径、格式等。
   • file: 输出文件的路径。
   • format: 输出文件的格式，常见的有 cjs (CommonJS)、es (ES Module)、iife (立即执行函数) 等。
   • sourcemap: 是否生成 sourcemap 文件，便于调试。
3. plugins: 配置 Rollup 插件，用于处理文件、转换代码等。
4. external: 指定外部依赖，这些依赖不会被 Rollup 打包进最终的 bundle 中。

插件的作用

• @rollup/plugin-node-resolve: 用于解析 node_modules 中的模块。
• @rollup/plugin-commonjs: 将 CommonJS 模块转换为 ES6 模块，以便 Rollup 能够处理。
• @rollup/plugin-babel: 使用 Babel 转换代码，通常用于将 ES6+ 代码转换为兼容性更好的 ES5 代码。

外部依赖

通过 external 配置项，可以指定哪些模块是外部依赖，这些模块不会被打包进最终的 bundle 中。例如，如果你使用了 lodash，并且希望它作为外部依赖，可以在配置文件中这样写：

external: ['lodash']

这样，lodash 将不会被打包进最终的 bundle.js 文件中，而是在运行时从外部加载。

动态配置

如果你需要根据不同的环境或条件生成不同的配置，可以导出一个函数，而不是一个静态的配置对象。例如：

// www.javascriptcn.com code example
export default (commandLineArgs) => {
  return {
    input: 'src/main.js',
    output: {
      file: commandLineArgs.output || 'dist/bundle.js',
      format: 'cjs'
    },
    plugins: [
      resolve(),
      commonjs(),
      babel({ babelHelpers: 'bundled' })
    ]
  };
};

在这个例子中，配置对象是根据命令行参数动态生成的。