使用 Webpack 的平台特定代码 - React Native

Question

我一直在努力寻找解决方案并左右尝试解决方案，但我似乎无法弄清楚这个问题。

对于 React Native，我们有 .ios 和 .android 文件扩展名。 React Native 打包器将为我们处理每一个。现在，我正在使用 webpack（因为我喜欢折磨自己），但我无法让它正确解析文件扩展名。使用 React Native Webpack Server（似乎没有解决方案），它 returns 看起来类似于这样的错误：

这是因为有一个 .ios 和 .android 文件被调用为：require('Spinner'); React Native 打包器将解析这些文件，webpack 不会。我需要混合使用这两者才能使其正常工作，或者现在是否有一个神奇的解决方案来解决我根本不必再使用 webpack 的问题。

我认为仅此一项我就明白了我的观点，想知道是否有 webpack 扩展或解析别名可用于解决此问题。如果需要，我会 post 我的 webpack 设置在这里。

Answer 1

让我分享我的灵感:) 您可以将 webpack 配置拆分为两个配置，每个配置都有一个入口点。然后在 resolve 部分指定 .ios.js 和 .android.js 扩展名：

entry: {
  'index.ios': ['./src/main.ios.js']
},
...
resolve: {
   extensions: ['', '.js', '.ios.js', ...] // '.android.js' will be in other config
}

或者你可以写自己的loader，但是需要更多的灵感。

使用 Webpack 的平台特定代码 - React Native

Platform Specific Code with Webpack - React Native

webpack

webpack-dev-server

react-native