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

·  阅读 612

本节是基于上一节继续讲解,在此节开始之前,我们先看一个案例,在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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改