我有一个使用React和Webpack编写的项目，当我尝试运行我的构建时，我遇到了“意外令牌”错误。关于这一点的奇怪之处在于我在我的一台机器上出现此错误，但在另一台机器上却没有。
背景： 我有两种不同的环境 一个是我的开发机器（Windows 10专业版） 另一个是我的构建服务器（Windows 10标准）
在两台机器上我完全卸载了Node，npm等。我已经重新安装了最新版本的Node（节点版本6.2.1，npm版本3.9.3）。
当我在开发环境中运行构建命令时，一切正常。当我在构建环境中运行构建时，我收到错误“意外令牌。您可能需要一个合适的加载器来处理此文件时间”。）
当它尝试使用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
答案 0 :(得分：1)
在某些Windows机器上，Node 6+目前存在一个错误，即使配置正确，似乎也无法加载babel加载程序。一些似乎有帮助的建议是;
删除node_modules文件夹和/或在终端中运行“npm cache clean”，然后通过“npm install”重新安装repo。
这对我不起作用，但降级了我的Node版本。
如果你想确保你的配置是正确的;降级到节点5.12并运行您的代码。它似乎很稳定，没有遇到这个问题。请注意，前节点6不支持一些不错的ES2015语法功能。
另请注意，这不是一个解决方案，而是一个可行的解决方法，直到找到特定原因。希望它有所帮助！