使用webpack将ES6转化ES5的实现方法
babel使用
打开babel官网，按教程安装babel
安装
npminstall--save-devbabel-loader@babel/core@babel/preset-env
配置rules
module:{
rules:[
{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"}
]
}
生成.babelrc文件
{
"presets":["@babel/preset-env"]
}
此时webpack已经能正确的将高版本的js语法转为低版本的语法，但是对于新增的api并不会转化，如promise。这时我们就需要其他的插件
使用polyfill插件，对于babel=>7.4.0该方法弃用
安装
npminstall--save@babel/polyfill
修改.babelrc
{
"presets":[
[
"@babel/preset-env",
{
"useBuiltIns":"usage"//只转化使用了的API
}
]
]
}
使用在需要转换的文件里引入polyfill
import"@babel/polyfill";
@babel/polyfill和@babel/preset-env的关系
@babel/preset-env中与@babel/polyfill的相关参数有targets和useBuiltIns两个
targets:支持的目标浏览器的列表
useBuiltIns:参数有“entry”、”usage”、false三个值。默认值是false，此参数决定了babel打包时如何处理@babel/polyfilll语句。
“entry”:会将文件中import‘@babel/polyfilll'语句结合targets，转换为一系列引入语句，去掉目标浏览器已支持的polyfilll模块，不管代码里有没有用到，只要目标浏览器不支持都会引入对应的polyfilll模块。
“usage”:不需要手动在代码里写import‘@babel/polyfilll'，打包时会自动根据实际代码的使用情况，结合targets引入代码里实际用到部分polyfilll模块
false:对import‘@babel/polyfilll'不作任何处理，也不会自动引入polyfilll模块
使用plugin-transform-runtime
安装
npminstall--save-dev@babel/plugin-transform-runtime
修改.babelrc
{
"presets":[
[
"@babel/preset-env"
]
],
"plugins":[
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime":false,
"corejs":3,
"helpers":true,
"regenerator":true,
"useESModules":false
}
]
]
}
注意上面corejs设置项，不同的值需要不同的依赖包
| corejs的值 | 需要安装的依赖包 |
|---|---|
| false | npminstall--save@babel/runtim |
| 2 | npminstall--save@babel/runtime-corejs2 |
| 3 | npminstall--save@babel/runtime-corejs3 |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。