#1. 下载依赖包
1
2
3
4
5
6
| "dependencies": {
"@babel/core": "^7.2.2",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"@babel/preset-env": "^7.3.4"
},
|
需要注意的是， Babel默认只转换新的javascript语法，而不转换新的API，比如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| babel不会对 :
Generator
Set
Map
Array.from
Array.prototype.includes
进行转义，如果需要，要安装全局或者局部垫片进行处理
局部垫片 babel-plugin-transform-runtime babel-runtime -save-dev
全局垫片 babel-polyfill -使用方案
在入口文件直接 import 'babel-polyfill'即可，如果打包文件没有进行配置的话，在全局创建.babelrc文件进行配置（在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。）
{
"presets" : [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
],
"plugins": ["transform-runtime"] // 如果使用局部垫片改变api的话进行配置
}
如果出现this.setDynamic is not a function ，检查@babel/core/babel-loader和runtime 和transform的版本是否对应
|
2.配置输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| module.exports = {
entry : {
appTest: './app.js'
},
output : {
filename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
use:{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['>1%', 'last 2 versions']
}
}]
]
}
},
exclude: '/node_modules/'
}
]
}
}
|
参考链接https://www.cnblogs.com/tugenhua0707/p/9452471.html
