报错信息如下：
ModuleParseError: Module parse failed: xxxxxxxxxxxxxxx/node_modules/babel-loader/lib/index.js!xxxxxxxxxxxxx/js/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { compose, registry, advice, debug } from 'flightjs';
| import crossroads from 'crossroads';
| import initializeDefault from './page/default';
at NormalModule.<anonymous> (/home/admin/workspace/zipkin-ui/node_modules/webpack/lib/NormalModule.js:113:20)
at NormalModule.onModuleBuild (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at Object.context.callback (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at Object.module.exports (/home/admin/workspace/zipkin-ui/node_modules/babel-loader/lib/index.js:172:8)
at WEBPACK_CORE_LOADER_EXECUTION (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
at runSyncOrAsync (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
at nextLoader (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/admin/workspace/zipkin-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/admin/workspace/zipkin-ui/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:440:3)
package.json中版本 如下：
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.4.1",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-polyfill": "^6.7.4",
"chai": "^3.5.0",
"component-webpack-plugin": "0.2.1",
"copy-webpack-plugin": "^1.1.1",
"css-loader": "^0.23.1",
"eslint": "^2.4.0",
"eslint-config-airbnb": "^6.1.0",
"eslint-plugin-react": "^4.2.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.10.0",
"karma": "^0.13.21",
"karma-babel-preprocessor": "^6.0.1",
"karma-chai": "^0.1.0",
"karma-mocha": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"mocha": "^2.4.5",
"mustache-loader": "^0.3.1",
"node-gyp": "^3.8.0",
"node-sass": "^4.9.3",
"phantomjs-prebuilt": "^2.1.4",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.14.1"
}webpack.config.js中配置如下：
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.mustache$/,
loader: 'mustache'
},
{
test: /\.css(\?.*)?$/,
loader: ExtractTextPlugin.extract('style', 'css?-minimize')
},
{
test: /.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap')
}, {
test: /\.(jpg|png|gif|eot|svg|ttf|woff(2)?)(\?.*)?$/,
include: /\/(node_modules|libs|static)\//,
loader: 'file',
}]
},修改方法：
安装babel-preset-es2015和babel-preset-react
安装命令如下：
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
package.json中出现 两个插件：
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",修改 webpack.config.js中babel-loader的配置如下：
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=react,presets[]=es2015'
修改后编译运行：
又报错了：
ModuleBuildError: Module build failed: SyntaxError: Unexpected token (46:8)
44 | count: modelView.traces.length,
45 | apiURL: modelView.apiURL,
> 46 | ...modelView
| ^
47 | }));
48 |
49 | SpanNamesData.attachTo(document);
at NormalModule.onModuleBuildFailed (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
at nextLoader (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
at /home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at runSyncOrAsync (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:173:4)
at nextLoader (/home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /home/admin/workspace/zipkin-ui/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/admin/workspace/zipkin-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/admin/workspace/zipkin-ui/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:440:3)
BabelLoaderError: SyntaxError: Unexpected token (46:8)
44 | count: modelView.traces.length,
45 | apiURL: modelView.apiURL,
> 46 | ...modelView
| ^
47 | }));
48 |
49 | SpanNamesData.attachTo(document);
at transpile (/home/admin/workspace/zipkin-ui/node_modules/babel-loader/lib/index.js:61:13)
at Object.module.exports (/home/admin/workspace/zipkin-ui/node_modules/babel-loader/lib/index.js:163:20)
不要着急，经过查找大量资料，得知需要在安装一个babel-preset-stage-2
安装命令如下：
npm install babel-preset-stage-2
然后修改webpack.config.js中babel-loader的配置如下：
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2'
然后编译成功，运行成功！
转载 请注明出处https://blog.csdn.net/tongtong_use/article/details/82177851