问题出在哪??
学习es6的decorator时,由于不兼容需要安装babel-plugin-transform-decorators-legacy
"babel-plugin-transform-decorators-legacy": "^1.3.4",
安装完成后配置.babelrc文件
{
"presets": ["es2015"],
"plugins": ["transform-decorators-legacy"]
}
然后就报错了:
ERROR in ./app/js/class/demo16.js
Module parse failed: D:\nodejs\es6-base\app\js\class\demo16.js Unexpected character '@' (10:8)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (10:8)
at Parser.pp$4.raise (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2468:15)
at Parser.pp$7.next (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2413:10)
at Parser.pp.eat (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:536:12)
at Parser.pp.expect (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:597:10)
at Parser.pp$1.parseClass (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1087:10)
at Parser.pp$1.parseStatement (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:697:19)
at Parser.pp$1.parseBlock (D:\nodejs\es6-base\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:981:25)
@ ./app/js/index.js 2:0-25
package.json文件:
{
"name": "es6",
"version": "1.0.2",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"connect-livereload": "^0.6.1",
"del": "^4.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-if": "^2.0.2",
"gulp-live-server": "0.0.31",
"gulp-livereload": "^3.8.1",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^1.4.0",
"gulp-sequence": "^1.0.0",
"gulp-uglify": "^3.0.2",
"gulp-util": "^3.0.8",
"require-dir": "^1.2.0",
"vinyl-named": "^1.1.0",
"webpack": "^3.12.0",
"webpack-stream": "^3.2.0",
"yargs": "^13.2.2"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
解决问题
问题原因在task目录下的scripts.js文件中:
.pipe(gulpWebpack({
module: {
rules: [ {test: /\.js$/, loader: 'babel-loader'} ]
}
})
将rules修改为loaders就行了:
.pipe(gulpWebpack({
module: {
loaders: [ // 此处使用rules会使得index.js中使用 @或者import 语法报错
{test: /\.js$/, loader: 'babel-loader'} ]
}
})
找了半天各种尝试还是看看文档吧:
webpack从v1升级到v2或者v3