如何使用 @rollup/plugin-node-resolve 插件？

推荐答案

// www.javascriptcn.com code example
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    nodeResolve({
      // 配置选项
      moduleDirectories: ['node_modules'], // 指定模块目录
      extensions: ['.js', '.json'], // 解析的文件扩展名
      preferBuiltins: true, // 优先使用Node.js内置模块
      browser: false, // 是否在浏览器环境中使用
      dedupe: ['lodash'], // 去重特定模块
      mainFields: ['module', 'main'], // 指定package.json中的字段顺序
      jail: '/my/project', // 限制模块解析的根目录
      only: ['some-module'], // 只解析指定的模块
      customResolveOptions: {
        // 自定义解析选项
        moduleDirectory: 'my_modules'
      }
    })
  ]
};

本题详细解读

1. 插件的作用

@rollup/plugin-node-resolve 插件用于帮助 Rollup 解析第三方模块的路径。它能够自动查找并解析 node_modules 中的模块，确保 Rollup 能够正确打包这些依赖。

2. 配置选项详解

• moduleDirectories: 指定模块查找的目录，默认是 ['node_modules']。
• extensions: 指定解析的文件扩展名，默认是 ['.js', '.json', '.node']。
• preferBuiltins: 如果设置为 true，插件会优先使用 Node.js 内置模块，而不是 node_modules 中的模块。
• browser: 如果设置为 true，插件会优先使用 browser 字段指定的模块版本。
• dedupe: 去重特定模块，避免重复打包。
• mainFields: 指定 package.json 中的字段顺序，默认是 ['module', 'main']。
• jail: 限制模块解析的根目录，防止解析到项目外的模块。
• only: 只解析指定的模块，其他模块将被忽略。
• customResolveOptions: 自定义解析选项，可以指定模块目录等。

3. 使用场景

• 当项目依赖第三方模块时，使用该插件可以确保 Rollup 能够正确解析这些模块的路径。
• 在构建浏览器端应用时，可以通过 browser 选项优先使用浏览器兼容的模块版本。
• 在需要去重模块或限制模块解析范围时，可以使用 dedupe 和 jail 选项。

4. 注意事项

• 如果项目中使用了 ES 模块和 CommonJS 模块混合的情况，确保 mainFields 配置正确。
• 在浏览器环境中使用时，注意 browser 选项的设置，以避免使用不兼容的模块版本。