网络ES6上的天才消息端口

Question

我试图移植天赋信使在网上反应本地端口。我陷入困境，没有任何解决错误的提示。错误是

421] ./~/react-web/lib/NativeModules/NativeModules.web.js 170 bytes {0} [built]
[422] ./~/react-web/lib/StyleSheet/processColor.web.js 229 bytes {0} [built]
[423] ./GiftedMessengerContainer.js 12.2 kB {0} [built] [1 error]
[425] ./~/react-hot-loader/makeExportsHot.js 1.69 kB {0} [built]
[426] ./~/react-hot-loader/isReactClassish.js 801 bytes {0} [built]
[427] ./~/react-hot-loader/isReactElementish.js 288 bytes {0} [built]

RROR in ./~/react-native-gifted-messenger/GiftedMessenger.js
odule parse failed: D:\MyDirectory\node_modules\react-native-gifted-messenger\GiftedMessenger.js Unexpected token (398:10)
ou may need an appropriate loader to handle this file type.
yntaxError: Unexpected token (398:10)
at Parser.pp.raise (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (D:\MyDirectorySharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.parseExprAtom (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:333:12)
at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseParenAndDistinguishExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:376:28)
at Parser.pp.parseExprAtom (D:MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:307:19)
at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:88:19)
@ ./GiftedMessengerContainer.js 19:22-62 

我在react本机中的实现是

var =require(“React本机”)；

var {
AppRegistry
} = React;

AppRegistry.registerComponent('PortedOnWeb', () => require('./GiftedMessengerContainer'));

我的package.json是

"dependencies": {
    "react": "0.14.8",
    "react-web": "0.2.4",
    "react-dom": "0.14.7",
    "react-native": "0.23.1",
    "react-art": "0.14.0",
    "socket.io-client": "1.3.7",
    "react-router": "2.4.1",
    "@exponent/react-native-navigator": "0.4.2",
    "react-native-incall-manager": "1.1.0",
    "react-native-extra-dimensions-android": "^0.17.0",
    "react-native-gifted-messenger": "*"
  },
  "devDependencies": {
    "babel-core": "6.9.0",
    "babel-loader": "6.2.4",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "react-hot-loader": "1.3.0",
    "webpack": "1.13.0",
    "webpack-dev-server": "1.14.1",
    "haste-resolver-webpack-plugin": "0.1.2",
    "webpack-html-plugin": "0.1.1",
    "css-loader": "0.23.1",
    "style-loader": "0.13.1",
    "file-loader": "0.8.5"
  }

最后我的web.config是，

module.exports = {
  ip: IP,
  port: PORT,
  devtool: 'source-map',
  resolve: {
    alias: {
      'react-native': 'react-web',
      'ReactNativeART': 'react-art',
    },
    extensions: ['', '.js', '.jsx'],
  },
  entry: isProd? [
    config.paths.index
  ]: [
    'webpack-dev-server/client?http://' + IP + ':' + PORT,
    'webpack/hot/only-dev-server',
    config.paths.index,
  ],
  output: {
    path: path.join(__dirname, 'output'),
    filename: 'bundle.js'
  },
  plugins: [
     new HasteResolverPlugin({
      platform: 'web',
      nodeModules: ['react-web']
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development'),
      }
    }),
    isProd? new webpack.ProvidePlugin({
      React: "react"
    }): new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlPlugin(),
  ],
  module: {
    loaders: [
      {
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react'],
      include: [config.paths.src],
      exclude: [/node_modules/]
      },
    { 
      test: /\.css$/, 
      loader: "style-loader!css-loader"
    },
    {
      test: /.*\.(gif|png|jpe?g|svg)$/i,
      loader: 'file-loader'
    }],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  }
};

如果有任何建议和暗示也非常欢迎。

编号397行代码

 <View style={this.styles.loadEarlierMessages}>

上面包含的代码，

​

​

带有新错误的编辑

我遵循给出的答案，我现在被困在这里

[535] ./~/react-native-gifted-messenger/Locale.js 7.19 kB {0} [built]
 
ERROR in ./~/react-native-button/Button.js
Module build failed: SyntaxError: D:/React_Practices/SharedRepo/node_modules/react-native-button/Button.js: U
nexpected token (21:4)
  19 | var Button = React.createClass({
  20 |   propTypes: {
> 21 |     ...TouchableOpacity.propTypes,
     |     ^
  22 |     containerStyle: View.propTypes.style,
  23 |     disabled: PropTypes.bool,
  24 |     style: Text.propTypes.style,
    at Parser.pp.raise (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\location.js:22:13)
    at Parser.pp.unexpected (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\util.js:89:8)
    at Parser.pp.parseIdentifier (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\expression.js
:1053:10)
    at Parser.pp.parsePropertyName (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\expression.

Answer 1

它没有识别JSX元素，因为它位于node_modules文件夹下，该文件夹被babel加载程序(即：exclude: [/node_modules/] )所排除。

问题是为什么node_modules下的模块不是预转移的，但这超出了范围。

编辑以回答新错误：

在babel中，默认情况下不支持...扩展运算符。

为了支持扩展操作符，添加第2阶段预设：

npm install --save-dev babel-preset-stage-2

并更改配置：

loaders: ['react-hot', 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2'],

如果您遇到更多的错误，请尝试安装第0阶段(也就是npm安装