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

一、babel预设

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

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

1.配置:

javascript 复制代码
{
    "presets": [
        "@babel/preset-env"
    ]
}

2.兼容的浏览器:

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

javascript 复制代码
last 3 version
> 1%
not ie <= 8

3.自身的配置:

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

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

配置方式是:

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

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

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

例如:

javascript 复制代码
new Promise(resolve =>{
    resolve()
});
const str = '字符';

转换的结果为:

javascript 复制代码
"use strict";

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

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

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

javascript 复制代码
npm i core-js
javascript 复制代码
{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ]
}
javascript 复制代码
"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

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

javascript 复制代码
{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ],
    "plugins":[
        ["@babel/plugin-proposal-class-properties",{
            "loose":true // 设置为true代表不严格的转换
        }]
    ]
}
javascript 复制代码
class A {
    a = 1;
    constructor(){
        this.b = 3;
    }
}

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

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

javascript 复制代码
{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3 //corejs版本
        }]
    ],
    "plugins":[
        ["@babel/plugin-proposal-class-properties",{
            "loose":true // 设置为true代表不严格的转换
        }],
        "@babel/plugin-proposal-function-bind"
    ]
}
javascript 复制代码
function Print() {
    console.log(this.loginId);
}

const obj = {
    loginId: "abc"
};

obj::Print(); //相当于:Print.call(obj);

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

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

支持 ?. 写法。

javascript 复制代码
{
    "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"
    ]
}
javascript 复制代码
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

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

javascript 复制代码
{
    "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-"可省略
    ]
}
javascript 复制代码
console.log("foo");
console.error("bar");

编译后:

javascript 复制代码

5.@babel/plugin-transform-runtime

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

三、webpack中运行

原理一样,安装 babel-loader 。

javascript 复制代码
module.exports = {
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [
            { test: /\.js$/, use: "babel-loader" }
        ]
    }
}
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github