构建中常用插件介绍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提供了一些选项来自定义转换行为：

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

import commonjs from  @rollup/plugin-commonjs ;

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

import commonjs from  @rollup/plugin-commonjs ;

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

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插件有一些常用的选项，下面是其中几个：

exportConditions: [ node ]

browser: true

moduleDirectories: [ node_modules ,  src/modules ]

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

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+）

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

import typescript from  @rollup/plugin-typescript ;

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

@rollup/plugin-replace

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

使用

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

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 。

常用配置项

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

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

replace({
  objectGuards: true
})

replace({
  preventAssignment: true
})

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

参考