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

【问题标题】：react-native-web and react-native-router-flux import issuereact-native-web 和 react-native-router-flux 导入问题
【发布时间】：2017-02-15 11:28:33
【问题描述】：

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

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

【问题讨论】：

这听起来像一个 Babel - 你确定你用来编译你的代码的配置是正确的吗？

标签： reactjs react-native react-router react-redux react-native-router-flux

【解决方案1】：

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

babel 编译

大多数 react-native 库都包含未编译的 ES6 JS，所以你需要告诉 Babel 编译这个 Javascript。 Babel 忽略了 node_modules 中的所有内容，因为您的 webpack 配置中有这一行：exclude: /node_modules/

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

相反，你应该将它添加到你的 webpack 配置中，在 loaders 数组中：

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

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

我写这个答案的时候还有很多其他的问题，但是我所有的 PR 都被合并了，所以在这之后一切都应该正常工作。

【讨论】：

这是一个非常彻底的答案，可能应该被标记为解决方案
谢谢，实际上我只是删除了很多，因为现在所有的修复都已经合并了。