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

Question

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

webpack 创建的捆绑.js文件给出以下错误：未捕获的语法错误：意外的令牌导入。

Answer 1

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

通天塔编译

大多数 react-native 库都包含未编译的 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 都已合并，所以在此之后一切都应该可以正常工作。