Question

我已使用react-native init初始化了一个新的React Native项目（0.57.4），并试图以编程方式在其上运行Metro捆绑器；但是，它无法解析React Native的内部模块（例如AccessibilityInfo），这是React Native源代码中的第一个模块require d：

Error: Unable to resolve module `AccessibilityInfo` from `/myproject/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map

按照说明清除缓存无济于事。

以下是我用于以编程方式运行Metro捆绑程序的代码：

const path = require('path')
const metro = require('metro')

const entry = './index.js'
const out = './build/index.bundle'
const platform = 'ios'
const root = process.cwd()

build()

async function build() {

  const config = {
    resolver: {
      providesModuleNodeModules: ['react-native'],
    },
    transformer: {
      babelTransformerPath: require.resolve('metro/src/reactNativeTransformer'),
    },
    serializer: {},
    server: {},
    projectRoot: root,
    watchFolders: [root, path.join(__dirname, 'node_modules', 'metro')],
  }

  const opts = { dev: false, entry, optimize: true, out, platform, sourceMap: true }

  return await metro.runBuild(config, opts)
}

我怀疑我可能缺少允许Metro解析标有@providesModule标头注释的React Natives模块的设置。

Answer 1

通过观察React Native正在传递给Metro的配置，我发现了使工作正常进行所需的一些其他设置，特别是hasteImplModulePath，getModulesRunBeforeMainModule和getPolyfills。

const config = {
  resolver: {
    providesModuleNodeModules: ['react-native'],
    resolverMainFields: ['react-native', 'browser', 'main'],
    hasteImplModulePath: path.join(root, 'node_modules/react-native/jest/hasteImpl.js'),
    blacklistRE: /(.*\/__fixtures__\/.*|node_modules[\/\\]react[\/\\]dist[\/\\].*|website\/node_modules\/.*|heapCapture\/bundle\.js|.*\/__tests__\/.*)$/,
  },
  transformer: {
    babelTransformerPath: require.resolve('metro/src/reactNativeTransformer')
  },
  serializer: {
    getModulesRunBeforeMainModule: () => [
      path.join(root, 'node_modules/react-native/Libraries/Core/InitializeCore.js')
    ],
    getPolyfills: require(path.join(root, 'node_modules/react-native/rn-get-polyfills')),
  },
  server: {},
  projectRoot: root,
  watchFolders: [root, path.join(root, 'node_modules'), path.join(__dirname, 'node_modules')],
}

要解析React Native的内部模块，需要哪些Metro Bundle设置？

1 个答案: