前端工程化之：webpack4-2(babel预设+babel插件+webpack中运行)

一、babel预设

 babel 有多种预设，最常见的预设是 @babel/preset-env 。

 @babel/preset-env 可以让你使用最新的 JS 语法，而无需针对每种语法转换设置具体的插件。

1.配置：

{
    "presets": [
        "@babel/preset-env"
    ]
}

2.兼容的浏览器：

 @babel/preset-env 需要根据兼容的浏览器范围来确定如何编译，和 postcss 一样，可以使用文件 .browserslisrc 来描述浏览器的兼容范围。

last 3 version
> 1%
not ie <= 8

3.自身的配置：

和 postcss-preset-env 一样， @babel/preset-env 自身也有一些配置。

具体的配置见：https://www.babeljs.cn/docs/babel-preset-env#options

配置方式是：

{
    "presets": [
        ["@babel/preset-env", {
            "配置项1": "配置值",
            "配置项2": "配置值",
            "配置项3": "配置值"
        }]
    ]
}

其中一个比较常见的配置项是 usebuiltins ，该配置的默认值是 false 。

它有什么用呢？由于该预设仅转换新的语法，并不对新的 API 进行任何处理。

例如：

new Promise(resolve =>{
    resolve()
});
const str = '字符';

 转换的结果为：

"use strict";
 
new Promise(function (resolve) {
  resolve();
});
var str = '字符串';

如果遇到没有 Promise 构造函数的旧版本浏览器，该代码就会报错。

而配置 usebuiltins 可以在编译结果中注入这些新的 API ，它的值默认值为 false ，表示不注入任何新的 API ，可以将其设置为 usage ，表示根据 API 的使用情况，按需导入 API 。最终运行的代码依赖于 corejs ，因此需要安装 corejs 。

npm i core-js

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ]
}

"use strict";
 
require("core-js/modules/es.object.to-string");//需要安装corejs才能运行
require("core-js/modules/es.promise");
new Promise(function (resolve) {
  resolve();
});
var str = '字符串';

二、babel插件

除了预设可以转换代码之外，插件也可以转换代码，它们的顺序是： 

• 插件在 Presets （预设）前运行。
• 插件顺序从前往后排列。
•  Preset （预设） 顺序是颠倒的（从后往前）。

通常情况下， @babel/preset-env 只转换那些已经形成正式标准的语法，对于某些处于早期阶段、还没有确定的语法不做转换。如果要转换这些语法，就要单独使用插件。

下面随便列举一些插件：

1.@babel/plugin-proposal-class-properties 

该插件可以让你在类中书写初始化字段。

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ],
    "plugins":[
        ["@babel/plugin-proposal-class-properties",{
            "loose":true // 设置为true代表不严格的转换
        }]
    ]
}

class A {
    a = 1;
    constructor(){
        this.b = 3;
    }
}

2.@babel/plugin-proposal-function-bind

该插件可以让你轻松的为某个方法绑定 this 。

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ],
    "plugins":[
        ["@babel/plugin-proposal-class-properties",{
            "loose":true // 设置为true代表不严格的转换
        }],
        "@babel/plugin-proposal-function-bind"
    ]
}

function Print() {
    console.log(this.loginId);
}
 
const obj = {
    loginId: "abc"
};
 
obj::Print(); //相当于：Print.call(obj);

遗憾的是，目前 vscode 无法识别该语法，会在代码中报错，虽然并不会有什么实际性的危害，但是影响观感。

 3.@babel/plugin-proposal-optional-chaining

支持 ?. 写法。

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ],
    "plugins":[
        ["@babel/plugin-proposal-class-properties",{
            "loose":true // 设置为true代表不严格的转换
        }],
        "@babel/plugin-proposal-function-bind",
        "@babel/plugin-proposal-optional-chaining"
    ]
}

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};
 
const baz = obj?.foo?.bar?.baz; // 42
 
const safe = obj?.qux?.baz; // undefined

4.@babel/plugin-transform-remove-console

该插件会移除源码中的控制台输出语句。

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ],
    "plugins":[
        ["@babel/plugin-proposal-class-properties",{
            "loose":true // 设置为true代表不严格的转换
        }],
        "@babel/plugin-proposal-function-bind",
        "@babel/plugin-proposal-optional-chaining",
        "babel-plugin-transform-remove-console" // "babel-plugin-"可省略
    ]
}

console.log("foo");
console.error("bar");

编译后：

5.@babel/plugin-transform-runtime

用于提供一些公共的 API ，这些 API 会帮助代码转换。

三、webpack中运行

原理一样，安装 babel-loader 。

module.exports = {
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [
            { test: /\.js$/, use: "babel-loader" }
        ]
    }
}