React Native 0.54.0中如何排除特定依赖打包？Metro配置方法

你之前用Webpack的externals搞定了Web端打包，但Metro的逻辑不一样——getBlacklistRE是用来排除特定文件路径的，没法直接处理模块导入。要实现类似忽略Node核心模块的效果，我们可以通过Metro的resolver配置把这些模块映射到一个空模块，具体步骤如下：

步骤1：创建空模块文件 #

在项目根目录新建一个empty-module.js文件，内容如下：

module.exports = {};

这个文件会用来替代那些客户端用不到的Node核心模块。

步骤2：配置rn-cli.config.js #

修改（或新建）项目根目录的rn-cli.config.js，通过resolver.extraNodeModules把需要忽略的模块映射到刚才的空文件：

const path = require('path');

module.exports = {
  resolver: {
    extraNodeModules: {
      net: path.resolve(__dirname, './empty-module.js'),
      fs: path.resolve(__dirname, './empty-module.js'),
      tls: path.resolve(__dirname, './empty-module.js'),
      // 把所有你需要忽略的Node核心模块都添加到这里
    }
  },
  // 如果你之前的getBlacklistRE配置有其他用途可以保留，否则可以返回null或者删除这个方法
  getBlacklistRE() {
    return null;
  }
};

替代方案：自定义请求解析 #

如果上面的方法不生效（比如某些版本的Metro对extraNodeModules的处理有差异），可以用自定义解析逻辑拦截模块请求：

const path = require('path');

module.exports = {
  resolver: {
    resolveRequest: (context, moduleName, platform) => {
      // 列出所有需要忽略的Node核心模块
      const ignoredNodeModules = ['net', 'fs', 'tls'];
      
      if (ignoredNodeModules.includes(moduleName)) {
        // 返回空模块的路径
        return {
          filePath: path.resolve(__dirname, './empty-module.js'),
          type: 'sourceFile',
        };
      }
      
      // 其他模块按默认逻辑处理
      return context.resolveRequest(context, moduleName, platform);
    }
  }
};

原理说明 #

Metro默认不会识别Node.js的核心模块（比如net、fs），直接打包会报错找不到模块。通过把这些模块映射到空文件，打包器就会用这个空模块替代原本的核心模块，而因为这些功能在客户端本来就用不到，所以不会影响应用运行，这和Webpack的externals效果类似。

内容的提问来源于stack exchange，提问作者tristantzara