7

我正在尝试深入研究 React 生态系统并在使用react-native-web我的 React Native 应用程序时遇到问题。我在https://github.com/thedarklord1/testNativeWithWeb上托管了该应用程序。我使用 Redux Store 和 React Native 构建了一个非常简单的 POC 来构建计算器。Android 和 iOS 版本按预期执行。我面临的问题是，在尝试运行webpack-dev-server时，react-native-web用于网络，它失败并出现错误

ERROR in ./src/App.js
Module parse failed: /Users/abhishekkumar/Desktop/Credifiable/front_end/testNativeWithWeb/src/App.js Unexpected token (9:6)
You may need an appropriate loader to handle this file type.
|   render() {

|     return (
|       <Provider store={store}>
|         <AppContainer/>
|       </Provider>
 @ ./index.web.js 1:0-28
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.web.js

我对 React 和 WebPack 生态系统相当陌生，感谢任何帮助或指点。TIA。

编辑：我正在使用命令webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors来运行服务器。

4

2 回答 2

4

您需要转译为 es2015，因为大多数浏览器本身并不理解现代 JS。

loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'stage-0', 'react']
            }
        }
    ]

在你的 webpack 配置中添加一个加载器。它应该工作。

于 2017-08-17T06:52:09.840 回答
3

在您的 package.json 中，将 script 标签替换为

  "scripts": {
    "start": "webpack-dev-server --hot"
  },

并使用 npm install webpack-dev-server --hot 安装“webpack-dev-server --hot”

并使用运行您的应用程序

npm start

您还需要将代码包含在 return 内的标签中

 render() {

     return (
<div>
       <Provider store={store}>
         <AppContainer/>
       </Provider>
</div>

并确保你已经安装了所有的 babel 依赖来编译你的代码

于 2017-08-10T12:01:59.433 回答