Webpack / Babel给予意想不到的令牌错误
我有一个使用React和Webpack编写的项目，当我尝试运行我的构build时，我得到一个“意外的令牌”错误。 奇怪的是，我在我的一台机器上得到了这个错误，而另一台却没有。
背景：我有两个不同的环境。
一个是我的开发机器（Windows 10 professional）另一个是我的生成服务器（Windows 10 standard）
在这两台机器上，我已经完全卸载Node，npm等。我已经重新安装了最新版本的Node（Node 6.2.1，npm version 3.9.3）。
当我在开发环境中运行我的构build命令时，一切正常。 当我在构build环境上运行构build时，出现“意外的令牌”错误，您可能需要一个合适的加载器来处理这个文件时间。
当它试图在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
目前在某些Windows机器上的Node 6+中存在一个错误，即使configuration正确，似乎也无法加载babel loader。 似乎有所帮助的一些build议是;
删除node_modules文件夹和/或在terminal中运行“npm cache clean”，然后通过“npm install”重新安装你的repo。
这不适合我，但降级我的版本的节点。
如果你想确保你的configuration是正确的， 降级到节点5.12并运行您的代码。 这似乎是稳定的，没有遇到这个问题。 请注意，节点6之前不支持一些不错的ES2015语法function。
另外请注意，这不是一个解决scheme，而是一个可行的解决方法，直到确定一个具体的原因。 希望能帮助到你！