node.js - Webpack/Babel 给出意外的 token 错误

Question

我有一个使用 React 和 Webpack 编写的项目，当我尝试运行我的构建时，出现“意外 token ”错误。奇怪的是，我在一台机器上收到此错误，但在另一台机器上却没有。

背景:我有两个不同的环境。
一台是我的开发机(Windows 10 专业版)另一个是我的构建服务器(Windows 10 标准)

在两台机器上我已经完全卸载了 Node、npm 等。我已经重新安装了最新版本的 Node(Node 版本 6.2.1、npm 版本 3.9.3)。

当我在开发环境中运行构建命令时，一切正常。当我在构建环境中运行构建时，出现错误“意外的 token 。您可能需要适当的加载器来处理此文件时间”)。

看起来错误是在尝试使用 babel 中的 jsx 时发生的。

我的 webpack.prod.config.js 文件如下所示:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: {
    main: [
      './dev/js/app/app',
    ]
  },
  output: {
    filename: 'scripts.js',
    path: './.tmp/js/',
    publicPath: '/js/'
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    root: path.resolve('./dev/js/app'),
    extensions:         ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|build)/,
        loader: 'babel'
      },
      {
        test: /\.jsx?$/,
        loader: "eslint-loader",
        exclude: /(node_modules|build)/
      },
      {
        "test": /\.json$/,
        "loader": "json"
      },
    ],
    eslint: {
      configFile: '.eslintrc.js'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        screw_ie8: true,
        warnings: false
      },
      comments: false
    }),
    new webpack.IgnorePlugin(/regenerator|nodent|js\-beautify/, /ajv/),
  ],
};

我的 package.json 如下所示:

{
  "name": "ridesystems-admin",
  "version": "0.0.1",
  "description": "Ride Systems Admin App",
  "private": true,
  "main": "start.js",
  "scripts": {
    "start": "node --use_strict start.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npm run webpack-dev & npm run watch-sass",
    "webpack-dev": "webpack-dev-server --progress --colors --inline --content-base dev/ --history-api-fallback",
    "watch-sass": "nodemon -e scss -x \"npm run compile-sass\"",
    "compile-sass": "node-sass --include-path scss dev/css/scss/main.scss  dev/css/main.css --sourceMap true",
    "build": "npm run clean-build && npm run copy && npm run build:styles && npm run build:scripts && npm run reversion",
    "build:styles": "npm run build-sass",
    "build:scripts": "npm run pack-js && npm run uglify-js",
    "copy": "npm run copy:dist",
    "copy:dist": "cpx \"./dev/**/*.{html,png,gif,jpg,ico,asp}\" ./build/",
    "reversion": "node ./bin/reversion",
    "clean-build": "rimraf build",
    "build-sass": "node-sass --include-path scss dev/css/scss/main.scss  build/css/main.css --outputStyle compressed",
    "pack-js": "webpack --config ./webpack.prod.config.js",
    "uglify-js": "mkdirp build/js && uglifyjs .tmp/js/scripts.js > build/js/scripts.js --screw-ie8"
  },
  "author": "John Reynolds",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-syntax-decorators": "^6.5.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "clean-css": "^3.4.17",
    "cpx": "^1.2.1",
    "eslint": "^2.12.0",
    "eslint-config-standard": "^5.1.0",
    "eslint-config-standard-react": "^2.4.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-promise": "^1.3.2",
    "eslint-plugin-react": "^5.1.1",
    "eslint-plugin-standard": "^1.3.2",
    "json-loader": "^0.5.4",
    "mkdirp": "^0.5.1",
    "node-sass": "3.7.0",
    "node-version-assets": "^1.1.0",
    "nodemon": "^1.9.1",
    "rimraf": "^2.5.2",
    "serve-static": "^1.11.1",
    "uglifyjs": "^2.4.10",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-notifier": "^1.3.0"
  },
  "dependencies": {
    "ajv": "^4.1.3",
    "animate-sass": "git+https://github.com/tgdev/animate-sass.git",
    "axios": "^0.12.0",
    "babel-preset-react": "^6.5.0",
    "bootstrap-sass": "^3.3.6",
    "classnames": "^2.2.5",
    "font-awesome": "^4.6.3",
    "jquery": "^3.0.0",
    "lodash": "^4.13.1",
    "moment": "^2.13.0",
    "querystring": "^0.2.0",
    "react": "^15.1.0",
    "react-addons-css-transition-group": "^15.1.0",
    "react-body-classname": "^1.0.1",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-router-redux": "^4.0.5",
    "redux": "^3.5.2",
    "redux-form": "^5.2.5",
    "redux-thunk": "^2.1.0"
  }
}

有什么想法可能导致此错误吗？

这是我从 Node 获得的输出:

ERROR in ./dev/js/app/app.js
Module parse failed: C:\TeamCity\buildAgent\work\9785690cbd035ffb\dev\js\app\app.js Unexpected token (27:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (27:2)
    at Parser.pp.raise (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:923:13)
    at Parser.pp.unexpected (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1490:8)
    at Parser.pp.parseExprAtom (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:333:12)
    at Parser.pp.parseExprSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExprList (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:660:23)
    at Parser.pp.parseSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:252:29)
    at Parser.pp.parseExprSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:231:15)
    at Parser.pp.parseMaybeUnary (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExpression (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:88:19)
    at Parser.pp.parseStatement (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1771:23)
    at Parser.pp.parseTopLevel (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1666:21)
    at Parser.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1632:17)
    at Object.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:885:44)
    at Parser.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
 @ multi main

Answer 1

目前在某些 Windows 机器上的 Node 6+ 中存在一个错误，即使配置正确，似乎也无法加载 babel loader。一些似乎有帮助的建议是:

删除node_modules文件夹和/或在终端中运行“npm cache clean”，然后通过“npm install”重新安装您的存储库。

这对我不起作用，但是降级我的 Node 版本确实有效。

如果您想确保您的配置正确；降级到 Node 5.12 并运行您的代码。看起来很稳定，没有遇到这个问题。请注意，Node 6 之前的版本不支持一些不错的 ES2015 语法功能。

另请注意，在确定具体原因之前，这不是解决方案，而是可行的解决方法。希望对您有帮助!