本节是基于上一节继续讲解,在此节开始之前,我们先看一个案例,在js文件中写一个ES6的语法,cd
工程目录下执行npm run build
这是所有猿类不想看到了,那么我们有什么办法?其实很简答,将高版本语法转成稳定的低版本不就行了,自己重写吗?自己写转化方法?
当然不是!在软件生态已经很成熟的状态下,本人是非常拒绝重造轮子,应该是使用开源的插件,后期加以消化成自己的工具!!!废话说的有点多了,开始本章的东西吧!
一、babel-loader @babel/core @babel/preset-env 模块的配置
上面说了这么多,大家肯定都知道这两个模块就是转化高级js语法的!
- 1.使用
npm i babel-loader @babel/core @babel/preset-env -D
- 2.还是和前面一样增加webpack 的模块配置项。
- 3.现在在执行
npm run build
看下输出结果,新生成的js文件是不是已经转成低版本的语法了!
二、babel 其它模块配置
咱们在写一个ES6的语法如下
class Test {
a=1
}
let t = new Test();
console.log(t.a)
执行看 npm run build
,报错了!
Add @babel/plugin-proposal-class-properties
插件。那我们就按照他做吧
npm i @babel/plugin-proposal-class-properties -D
,在去webpack 配置文件配置下这个小插件。
{
test:/\.js$/,
use:[{
loader: "babel-loader",
options: {
presets:[
'@babel/preset-env' //包含es6 转 es5模块
],
plugins:[
'@babel/plugin-proposal-class-properties'
]
}
}
]
},
执行下npm run build
看下index.js文件。
源码下载
创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_to_es5
。
进入工程目录,执行 npm install -D
。