Rollup 构建中常用插件指南：commonjs、node-resolve、typescript和replace

在现代的前端开发中，构建工具扮演着重要的角色。构建工具不仅可以帮助我们自动化地完成诸如编译、压缩、打包等繁琐的任务，还可以通过插件的形式扩展其功能。本文将介绍几个在构建工具中常用的插件，包括@rollup/plugin-commonjs、@rollup/plugin-node-resolve、@rollup/plugin-typescript和@rollup/plugin-replace

@rollup/plugin-commonjs

@rollup/plugin-commonjs 是一个用于 Rollup 构建工具的插件，它允许你在使用 Rollup 打包 CommonJS 模块时进行转换。CommonJS 是一种用于在浏览器之外执行 JavaScript 代码的模块规范，而 Rollup 默认只支持 ES 模块。这个插件的作用就是将 CommonJS 模块转换为 ES 模块，以便在 Rollup 中进行打包。使用 @rollup/plugin-commonjs，你可以在 Rollup 中引入和使用来自 npm 包的 CommonJS 模块，而无需手动进行转换。这个插件还支持一些高级功能，比如解析动态导入语法和处理循环依赖。通过在 Rollup 配置文件中添加 @rollup/plugin-commonjs，你可以更方便地使用 Rollup 打包项目中的 CommonJS 模块。

使用

npm安装@rollup/plugin-commonjs:

npm install @rollup/plugin-commonjs --save-dev

创建一个rollup.config.js配置文件并导入插件：

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [commonjs()]
};

然后通过CLI或API调用rollup：

rollup -c

常用配置项

@rollup/plugin-commonjs提供了一些选项来自定义转换行为：

1. strictRequires：根据项目需求选择合适的模式，例如设置为true以保留Node.js语义，或设置为"auto"以在必要时包装CommonJS文件。
2. exclude 和 include：根据项目需求指定要忽略或包含的文件。可以使用picomatch模式来匹配文件路径。
3. extensions：指定在无扩展名导入时搜索的扩展名的顺序。
4. transformMixedEsModules：根据项目需求决定是否启用混合模块转换。
5. ignore：根据项目需求指定要保留未转换的require语句的模块。

下面是一些具体的使用案例：

1. 设置strictRequires为true，默认值为"auto"，会在CommonJS依赖循环或条件导入时包装文件。设置为true时，将包装所有CommonJS文件以保留Node.js语义。设置为false时，不进行包装。还可以提供picomatch模式来指定需要包装的文件。

import commonjs from '@rollup/plugin-commonjs';

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

1. 使用exclude和include来指定要忽略或包含的文件：

import commonjs from '@rollup/plugin-commonjs';

export default {
  // ...
  plugins: [
    commonjs({
      exclude: 'node_modules/**',
      include: ['src/**/*.js', 'lib/**/*.js']
    })
  ]
};

1. 设置transformMixedEsModules为true，即控制是否启用混合模块转换。例如在包含ES import语句和CommonJS require表达式的模块，设置为true时，将将require调用转换为import语句。设置为false时，保留require表达式。

import commonjs from '@rollup/plugin-commonjs';

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

这些示例展示了如何根据具体需求配置@rollup/plugin-commonjs插件，以实现对CommonJS模块的转换和处理。根据项目的具体情况，可以选择适合的选项来优化构建过程和生成的代码。此外，此插件常与我们下文的@rollup/plugin-node-resolve一起使用。

@rollup/plugin-node-resolve

@rollup/plugin-node-resolve是一个Rollup插件，用于解析Node.js模块。它可以让Rollup打包时使用Node.js模块（包括外部依赖），而不仅仅是ES模块。该插件将检查模块的package.json文件以确定模块的主文件位置，并解决模块之间的依赖关系。此外，它还可以解析模块的绝对路径和相对路径，确保正确地解析和加载模块。

使用

确保你的Node版本是LTS版本（v14.0.0+），并且已经安装了Rollup（v2.78.0+）

使用以下命令安装@rollup/plugin-node-resolve插件：

npm install @rollup/plugin-node-resolve --save-dev

创建一个rollup.config.js配置文件并导入插件：

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [nodeResolve()]
};

现在，你可以通过命令行或API调用Rollup来执行打包操作。此外如果你的包使用了package.json的exports或imports字段来指定入口点，插件会自动支持这个特性。如果没有指定这些字段，插件将使用mainFields字段来确定入口点。如果你的包中使用了一些内置模块（如fs、path），插件默认会优先使用这些内置模块。如果你想使用本地安装的同名模块，可以将preferBuiltins选项设置为false。

常用配置项

@rollup/plugin-node-resolve插件有一些常用的选项，下面是其中几个：

1. exportConditions：用于匹配解析模块时的额外条件。默认情况下，插件会使用['default', 'module', 'import']条件来解析导入语句。你可以通过设置exportConditions选项来添加额外的条件。例如：

   exportConditions: ['node']
   

2. browser：用于指定是否使用package.json中的browser模块解析规则。如果设置为true，插件将使用browser字段来解析模块。例如：

   browser: true
   

3. moduleDirectories：用于指定递归查找模块的目录列表。默认情况下，插件会在node_modules目录中查找模块。你可以根据需要添加其他目录。例如：

   moduleDirectories: ['node_modules', 'src/modules']
   

4. dedupe：用于指定需要强制解析到根node_modules目录的模块列表，以避免重复打包相同的包。例如：

   dedupe: ['my-package', '@namespace/my-package']
   

5. mainFields：用于指定在package.json中确定入口点时要扫描的属性列表。默认情况下，插件会使用['module', 'main']属性来确定入口点。你可以根据需要添加其他属性。例如：

   mainFields: ['browser', 'module', 'main']
   

下面是一个具体的使用案例：

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    nodeResolve({
      exportConditions: ['node'],
      browser: true,
      moduleDirectories: ['node_modules', 'src/modules'],
      dedupe: ['my-package', '@namespace/my-package'],
      mainFields: ['browser', 'module', 'main']
    })
  ]
};

@rollup/plugin-typescript

@rollup/plugin-typescript是一个用于Rollup构建工具的插件，用于将TypeScript代码转换为可在浏览器中运行的JavaScript代码。它提供了TypeScript的静态类型检查和编译功能，可以帮助开发者在构建过程中捕获潜在的错误和问题。该插件还支持使用不同的TypeScript编译选项，如模块解析、代码压缩和输出格式等。使用@rollup/plugin-typescript，开发者可以更加高效地开发和构建TypeScript项目，并且能够轻松地与其他Rollup插件集成。无论是开发小型应用还是大型复杂项目，@rollup/plugin-typescript都是一个强大且易于使用的工具，能够提升开发效率并提供更好的代码可维护性。

使用

确保你的Node版本是LTS版本（v14.0.0+），并且已经安装了Rollup（v2.14.0+）

1. 使用npm安装@rollup/plugin-typescript：

   npm install @rollup/plugin-typescript --save-dev
   

2. 在项目根目录下创建一个名为rollup.config.js的文件，并添加以下内容：

   import typescript from '@rollup/plugin-typescript';
   
   export default {
     input: 'src/index.ts',
     output: {
       dir: 'output',
       format: 'cjs'
     },
     plugins: [typescript()]
   };
   

3. 配置选项： @rollup/plugin-typescript支持一些配置选项，可以根据需要进行设置。以下是一些常用的选项：

   • exclude：指定要忽略的文件，可以使用picomatch模式进行匹配。
   • include：指定要处理的文件，可以使用picomatch模式进行匹配。
   • filterRoot：指定要解析include和exclude模式的目录。可以选择针对一个不同于当前工作目录（process.cwd()）的目录来解析包括和排除模式。如果指定了一个字符串，则该值将被用作基本目录。相对路径将首先针对process.cwd()解析。如果为false，则模式将不会针对任何目录进行解析。
   • tsconfig：指定自定义的tsconfig文件。
   • typescript：指定自定义的TypeScript模块。
   • tslib：指定自定义的TypeScript助手模块。
   • transformers：允许注册自定义的TypeScript转换器，此高级配置建议看文档plugins/packages/typescript/README · rollup/plugins。

@rollup/plugin-replace

@rollup/plugin-replace是一个Rollup插件，它允许在打包过程中替换代码中的特定字符串。这个插件可以用来动态地替换配置文件中的常量，或者在不同环境中使用不同的变量。它还可以用来替换不同构建之间的代码，以便于在不同的构建之间进行比较和调试。@rollup/plugin-replace支持多种不同的替换方式，包括代码中的常量替换、环境变量替换和正则表达式替换等。它还可以与其他Rollup插件和工具一起使用，以便于更好地管理和控制代码库。

使用

1. 使用npm命令安装@rollup/plugin-replace：

   npm install @rollup/plugin-replace --save-dev
   

2. 在项目根目录下创建一个名为rollup.config.js的文件，并添加以下内容：

   import replace from '@rollup/plugin-replace';
   
   export default {
     input: 'src/index.js',
     output: {
       dir: 'output',
       format: 'cjs'
     },
     plugins: [
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
         __buildDate__: () => JSON.stringify(new Date()),
         __buildVersion: 15
       })
     ]
   };
   

上面的配置将替换所有包含在构建中的文件中的每个实例 process.env.NODE_ENV 为 production 和 __buildDate__ 为给定函数的结果。 注意：值必须是原始类型（例如字符串、数字）或返回字符串的函数。对于复杂的值，请使用 JSON.stringify 。

常用配置项

1. values: 这个选项用于指定要替换的目标字符串及其替换值。可以使用一个对象来定义多个替换规则。替换值可以是字符串或返回字符串的函数。其实际上就是上文书写模式的进阶版，以此避免与其他配置项混用。

   replace({
     values: {
       'process.env.NODE_ENV': '"production"',
       __buildDate__: () => JSON.stringify(new Date()),
       __buildVersion: 15
     }
   })
   

2. delimiters: 这个选项用于指定替换字符串的边界。默认情况下，边界是单词边界，并且不会替换嵌套访问的实例。可以使用一个包含两个字符串的数组来定义边界。

   replace({
     delimiters: ['\\b', '\\b(?!\\.)']
   })
   

3. objectGuards: 当替换类似于process.env.NODE_ENV这样的点分隔的对象属性时，还会替换对该对象进行typeof检查的代码。这个选项用于启用或禁用这种替换。

   replace({
     objectGuards: true
   })
   

4. preventAssignment: 这个选项用于防止在字符串后面紧跟一个等号时进行替换。可以用于避免错误的赋值操作。

   replace({
     preventAssignment: true
   })
   

以上只是一些常用选项的示例，@rollup/plugin-replace还有其他选项可供使用。你可以参考官方文档@rollup/plugin-replace - npm以获取更详细的信息和更多的使用案例。

参考

• rollup/plugins: 🍣 The one-stop shop for official Rollup plugins

• @rollup/plugin-commonjs - npm

• plugins/packages/typescript/README.md at master · rollup/plugins

• @rollup/plugin-replace - npm