# Webpack实现es6转换为es5
# 安装插件
npm install --save-dev babel-loader @babel/core @babel/preset-env
# 配置
在webpack.config.js中的module的rules中,添加一条新的loader
{
test: /\.js/, //babel转化es6到es5
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: 2
}
]
]
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
目前就已经可以了
缺点,会他会对于window的变量造成一些污染,那么我们就可以使用第二种方式
# 第二种方式
# 安装
npm install --save-dev babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime
# 使用
在webpack.config.js中的module的rules中添加一条如下规则
{
test: /\.js/, //babel转化es6到es5
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
// presets: [
// [
// "@babel/preset-env",
// {
// useBuiltIns: "usage",
// corejs: 2
// }
// ]
// ],
plugins: ["@babel/plugin-transform-runtime"]
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
这种方式也有对应的缺点,对于原型链上的方法不会进行转义,所以如果你要写一些公开库,推荐使用这种,如果自己平常开发,很少会碰到原型链,那么就是用@babel/preset-env
关于评论
评论前请填好“昵称”、“邮箱”这两栏内容，否则不会收到回复，谢谢！