react-native-web和react-native-router-flux导入问题

Question

当我尝试使用react-native-web库创建与浏览器兼容的react-native应用程序时，如果应用程序包含用于路由的react-native-router-flux库，则无效。

webpack创建的bundle.js文件出现以下错误： 未捕获的SyntaxError：意外的令牌导入。

Answer 1

将react-native-router-flux与react-native-web一起使用时存在一些问题。

Babel编译

大多数反应原生库包括未编译的ES6 JS，因此您需要告诉Babel编译此Javascript。 Babel忽略了node_modules中的所有内容，因为你的webpack配置中有这一行：exclude: /node_modules/

但是，您不想删除该行。排除node_modules通常是一个好主意，因为有很多其他库不需要编译，所以Babel会做很多不必要的工作。

相反，您应该将此添加到您的webpack配置中，在加载器数组中：

  {
    test: /\.js$/,
    include: /node_modules\/react-native-/,
    loader: 'babel-loader',
    query: { cacheDirectory: true }
  },

这将告诉Babel编译任何以react-native-开头的库。

当我写这个答案时还有很多其他问题，但我的所有PR都已合并，所以一切都应该在此之后工作。