4、转化ES6语法

一、转化ES6语法使用的loader

1. babel-loader
2. @babel/core 转化的核心模块
3. @babel/preset-env 这是个大包，转化js语法的

loader用法

module:{
rules:[
{
test:/.js$/,
use:{
loader:'babel-loader',
options:{//用babel-loader 把ES6->ES5
presets:[//预设
'@babel/preset-env'
]
}
}
}
]
}

转化babel不能转化的语法

类似generator、promise不能被转化

如何转化

1. 安装相关依赖

npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime --save

注意：第一个安装是开发依赖，第二个安装是生产依赖

2. 用法

babel-loader有一个配置项options中有一个plugins，在这里配置即可

module:{
rules:[
{
test:/.js$/,
use:{
loader:'babel-loader',
options:{//用babel-loader 把ES6->ES5
presets:[//预设
'@babel/preset-env'
],
plugins:[
"@babel/plugin-transform-runtime"//把类似promise、generator等语法转化,另外还需要使用@babel/polyfill去转化类似includes的语法（这两者是生产依赖，不是开发依赖）
]
}
}
}
]
}

3. 辅助插件(别忘记)

除了上面的plugin之外，还有两个插件对es7的相关语法转化也有很大的帮助

1. @babel/plugin-proposal-decorators
这是es7中对class的装饰器的转化（先）
2. @babel/plugin-proposal-class-properties
这是es7中对class新增语法的转化 (后)

module:{
rules:[
{
test:/.js$/,
use:{
loader:'babel-loader',
options:{//用babel-loader 把ES6->ES5
presets:[//预设
'@babel/preset-env'
],
plugins:[
["@babel/plugin-proposal-decorators",{"legacy":true}],//es7中对class的装饰器的转化（先）
["@babel/plugin-proposal-class-properties",{"loose":true}],//es7中对class新增语法的转化 (后)
"@babel/plugin-transform-runtime"//把类似promise、generator等语法转化,另外还需要使用@babel/polyfill去转化类似includes的语法（这两者是生产依赖，不是开发依赖）
]
}
}
}
]
}

4. 另外还要使用一个@babel/polyfill

npm i @babel/polyfill （这是生产依赖，不是开发依赖）
在入口js引入
require('@babel/polyfill')

总结转化为ES6需要安装的8大依赖

a. 基础loader

1. babel-loader
2. @babel/core
转化的核心模块
3. @babel/preset-env 这是个大包，转化js语法的

b. 类似generator、promise语法转化

1. npm i @babel/plugin-transform-runtime -D
2. npm i @babel/runtime --save

c. es7部分语法支持

1. @babel/plugin-proposal-decorators
这是es7中对class的装饰器的转化（先）
2. c. @babel/plugin-proposal-class-properties
这是es7中对class新增语法的转化 (后)

d. 类似includes语法支持

1. npm i @babel/polyfill

最后

以上就是美好万宝路为你收集整理的4、转化ES6语法的全部内容，希望文章能够帮你解决4、转化ES6语法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。