从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

本文关键字:SyntaxError 意外 js app 编译 35升 Babel      更新时间:2023-09-26

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

在这个过程中,我无法从babel 5升级到6。当我这样做时,我会在app.js类中得到以下堆栈跟踪。

此代码适用于:

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

但一旦升级到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)

软件包.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

  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']
              }
          ]
      }
  };

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

添加.babelrc 后

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

然后我需要更新package.json

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

您必须安装babel预设

反应预设

es2015预设

在你的项目中添加一个.babelr文件,在那里你可以设置你的预设

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

如果你想看一看的话,这是一个很好的教程。