从Babel 5.8.35升级到6.0.0不会编译带有SyntaxError和意外令牌的app.js [英] Upgrading from Babel 5.8.35 to 6.0.0 will not compile app.js with a SyntaxError and unexpected token

问题描述

我正在用webpack升级我的所有ReactJS组件.

I am in the process of upgrading all my ReactJS components with webpack.

在此过程中，我无法从babel 5升级到6.这样做时，我在app.js类中获得了以下堆栈跟踪.

In the process I have not been able to upgrade from babel 5 to 6. When I do so I get the following stack trace within my app.js class.

此代码可与:

"babel-core": "^5.8.35",
"babel-loader": "^5.3.3",

但是一旦升级到6.0.0就会破产

But broke once upgrading to 6.0.0

代码是:

var objectListMap = this.state.objects.map(object =>
      <EntityObject key={object.entity._links.self.href}
            object={object}
            jsonAttributes={jsonAttributes}
            attributes={this.state.attributes}
            onUpdate={this.onUpdate}
            onDelete={this.onDelete}/>
    );

堆栈跟踪为:

 ERROR in ./app.js
 Module build failed: SyntaxError: C:/Work 2016/GitHub/aaronmagi/miwdesign/mcb-server/src/main/resources/static/app.js: Unexpected token (292:3)
   290 |
   291 |          var objectListMap = this.state.objects.map(object =>
 > 292 |                  <EntityObject key={object.entity._links.self.href}
       |                  ^
   293 |                                          object={object}
   294 |                                          jsonAttributes={jsonAttributes}
   295 |                                          attributes={this.state.attributes}
     at Parser.pp.raise (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:1378:13)
     at Parser.pp.unexpected (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:2817:8)
     at Parser.pp.parseExprAtom (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:749:12)
     at Parser.pp.parseExprSubscripts (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:504:19)
     at Parser.pp.parseMaybeUnary (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:484:19)
     at Parser.pp.parseExprOps (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:415:19)
     at Parser.pp.parseMaybeConditional (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:397:19)
     at Parser.pp.parseMaybeAssign (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:360:19)
     at Parser.pp.parseFunctionBody (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:1116:22)
     at Parser.pp.parseArrowExpression (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:1104:8)
     at Parser.pp.parseExprAtom (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:664:21)
     at Parser.pp.parseExprSubscripts (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:504:19)
     at Parser.pp.parseMaybeUnary (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:484:19)
     at Parser.pp.parseExprOps (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:415:19)
     at Parser.pp.parseMaybeConditional (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:397:19)
     at Parser.pp.parseMaybeAssign (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:360:19)
     at Parser.pp.parseExprListItem (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:1206:16)
     at Parser.pp.parseCallExpressionArguments (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:580:20)
     at Parser.pp.parseSubscripts (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:543:29)
     at Parser.pp.parseExprSubscripts (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:514:15)
     at Parser.pp.parseMaybeUnary (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:484:19)
     at Parser.pp.parseExprOps (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:415:19)
     at Parser.pp.parseMaybeConditional (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:397:19)
     at Parser.pp.parseMaybeAssign (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:360:19)
     at Parser.pp.parseVar (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:2274:24)
     at Parser.pp.parseVarStatement (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:2121:8)
     at Parser.pp.parseStatement (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:1831:19)
     at Parser.pp.parseBlockBody (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:2208:21)
     at Parser.pp.parseBlock (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:2189:8)
     at Parser.pp.parseFunctionBody (C:\Work 2016\GitHub\aaronmagi\miwdesign\mcb-server\src\main\resources\static\node_modules\babylon\index.js:1125:22)

package.json

package.json

"dependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "rest": "^1.3.2",
    "sockjs-client": "^1.0.3",
    "stompjs": "^2.3.3",
    "webpack": "^1.13.0"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  }

webpack.config.js

webpack.config.js

  var path = require('path');

  var node_dir = __dirname + '/node_modules';

  module.exports = {
      entry: './app.js',
      devtool: 'sourcemaps',
      cache: true,
      debug: true,
      resolve: {
          alias: {
              'stompjs': node_dir + '/stompjs/lib/stomp.js',
              'when': node_dir + '/rest/node_modules/when/when.js'
          }
      },
      output: {
          path: __dirname,
          filename: './built/bundle.js'
      },
      module: {
          loaders: [
              {
                  test: path.join(__dirname, '.'),
                  exclude: /(node_modules)/,
                  loader: 'babel-loader'
                  // TODO remove for production
                  //loaders: ['react-hot','babel-loader']
              }
          ]
      }
  };

更新:解决方案是添加.BABELRC文件并更新package.json

添加.babelrc后

After adding .babelrc

{
  "presets": ["es2015", "react"]
}

然后我需要更新package.json

I then needed to update package.json

"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",

推荐答案

您必须安装babel预设

You have to install the babel presets

反应预设

es2015预设

将.babelr文件添加到您的项目中，以在其中设置预设

add a .babelr file to your project where you'll set up your presets

{
  "presets": ["es2015", "react"]
}

这是一个如果想看的话，很好的教程.

This is a good tutorial if you want to take a look.

这篇关于从Babel 5.8.35升级到6.0.0不会编译带有SyntaxError和意外令牌的app.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！