我们都知道,babel是一个转译器，可以把同种语言的高版本规则翻译成低版本规则, 一般在项目根目录下会有一个 .babelrc 文件, 用于默认解析 ES2015(es6) 中的特殊语法, 像 let,const, => 等等;
而babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。 所以需要使用 babel-polyfill，为当前环境提供一个垫片，需要在Webpack中配置babel-loader。
具体操作如下:
- 如果没有安装babel转码规则,需要先安装,
ES2015转码规则\
npm install --save-dev babel-preset-es2015
ES6+不同阶段语法提案的转码规则（共有4个阶段），选装一个就可以了
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$npm install --save-dev babel-preset-stage-2
配置babel转码规则, .babelrc文件如下:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
2.安装babel-polyfill
npm install --save-dev babel-polyfill
在入口文件main.js中引入
import 'babel-polyfill'
在build文件的webpack.base.conf.js文件下修改入口:
entry: {
app: ['babel-polyfill','./src/main.js']
},
3.配置"babel-loader"
npm install -D babel-loader@7 babel-core babel-preset-env webpack
在package.json文件中的devDependencies{}同级中, 添加代码:
"babel": {
"presets": [
"env"
],
"plugins": []
}
在webpack的webpack.base.config.js文件中, 添加如下代码:
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
到这就可以了, 完美解决.
