1.4 webpack 之 ES6或高级JS语法转化配置 附源码

本节是基于上一节继续讲解，在此节开始之前，我们先看一个案例，在js文件中写一个ES6的语法，cd工程目录下执行npm run build

看看有什么效果！

    打包是成功了，但是依然是es6的语法！这样会导致什么问题呢，假设es的版本升级了，浏览器并没有支持最新版本，那么撸的代码不就全废了？？？
    这是所有猿类不想看到了，那么我们有什么办法？其实很简答，将高版本语法转成稳定的低版本不就行了，自己重写吗？自己写转化方法？
    当然不是！在软件生态已经很成熟的状态下，本人是非常拒绝重造轮子，应该是使用开源的插件，后期加以消化成自己的工具！！！废话说的有点多了，开始本章的东西吧！

一、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文件。

    这边就举几个例子，比如还有类的注释器等解析输出，这里就不一一给出，可以去babel官网查下babeljs.io
源码下载

创建文件夹,cd至已创建文件夹，执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_to_es5。

进入工程目录，执行 npm install -D。