babel-preset-env 的应用实战-JavaScript中文网-JavaScript教程资源分享门户

随着时代的发展，前端的技术日新月异，不断涌现出各种新的语言、框架和工具。其中，Babel是一个非常重要的工具，它是一个JavaScript编译器，可以将新版本的JavaScript代码转换成可以在任何浏览器中运行的旧版本代码。

在使用Babel的过程中，Babel-preset-env是一个非常重要的插件，它可以自动根据浏览器支持的情况，转换代码为适合当前浏览器的版本。本文将针对babel-preset-env进行应用实战，并将详细介绍其深度和学习以及指导意义。

什么是babel-preset-env?

babel-preset-env是Babel的一个预设，可以根据当前环境自动转换ES6、ES7、ES8等语法。它会根据目标环境，如最低版本的浏览器、操作系统等根据自动规则进行代码转换。

在使用babel-preset-env之前，需要先了解一些Babel相关的基本概念。

Babel的基本概念

Babel插件

Babel插件是一组规则，用于将ES6代码转换为ES5代码，因为很多浏览器不支持ES6。例如，箭头函数、let、const等。

Babel预设

Babel预设是一组插件集合，可以根据应用程序配置的浏览器类型、版本等因素，自动选择所需的插件。例如，babel-preset-env，通过配置目标浏览器版本，自动选择项目所需要的插件。

Babel插件转换过程

解析首先，利用babylon对JavaScript代码进行解析，生成抽象语法树(Abstract Syntax Tree，AST)
转换然后，将AST转换为可以在新版本浏览器中执行的代码，这一步是通过遍历AST并应用Babel插件来实现的。
生成最后，将生成的新代码输出为字符串。

babel-preset-env的优势

babel-preset-env有如下优势：

智能分析环境 babel-preset-env会自动检测所需要的插件，而不是一个一个地手动添加。
保证代码质量通过智能分析，babel-preset-env可以转换ES6及以上版本到目标环境，从而偏低了JavaScript 编写的难度,可以专注于书写业务代码，而不是一些基础的代码。
保护对于浏览器上的兼容性由于babel-preset-env转换的代码可以在各种环境下运行，例如手机、平板、PC等多种终端上都可以实现运行，有助于保护代码的稳定性并提升开发效率。

为了更好地展现babel-preset-env的应用实战，这里给出一个示例代码

// .babelrc

// www.javascriptcn.com code example
{
  "presets": [
      [
        "@babel/preset-env", {
          "useBuiltIns": "usage", // 其余不展开，此参数决定了按需引入 polyfill
          "targets": {
              "chrome": "58",
              "ie": "11"
          }
        }
      ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

接下来的示例代码，我们将用 babel 处理。

//test.js

// www.javascriptcn.com code example
class Test {
  #a = 1
  static b = () => {
    console.log("Test.b")
  }
  c() {
    console.log("Test.c")
    const a = [1, 2, 3, 4].map(x => x * 2)
    console.log(a)
  }
}

这里使用babel-cli将ES6转成ES5。

babel-cli的详细使用可以参考 http://babeljs.io/docs Environments

babel-cli

$ npm install --global babel-cli

$ babel test.js -o test.es5.js

对应的ES5代码如下：

//test.es5.js

// www.javascriptcn.com code example
"use strict";

var Test = function () {
  function Test() {
    _classCallCheck(this, Test);
    this.#a = 1;
  }
  _createClass(Test, [{
      key: "c",
      value: function c() {
        console.log("Test.c");
        var a = [1, 2, 3, 4].map(function (x) {
          return x * 2;
        });
        console.log(a);
      }
  }], [{
      key: "b",
      value: function b() {
        console.log("Test.b");
      }
  }]);
  return Test;
}();

我们可以将test.es5.js上传到浏览器中实现对应功能，并验证运行正常。

指导意义

babel-preset-env在前端开发中扮演了非常重要的角色，其应用实战对于前端开发来说非常实用。在使用babel-preset-env时需要注意以下几点：

需要配合其他Babel插件使用。babel-preset-env只能进行ES6语法转换，不能进行JSX、TypeScript等语法转换。
需要确定转化的目标浏览器以及版本，此项需求决定需求偏向，最高兼容的浏览器版本越高，转换出的代码越多，体积也会越大。
如果使用useBuiltIns参数，需要注意其language polyfill的使用方式，使用三种不同的方式分别会引入不同的代码以及体积。尽可能使用按需加载的方式。

最后，babel-preset-env虽然便捷，但是也存在不足，对于非语法类的ES6特性（比如Promise、Set等），babel-preset-env转换的代码仍然无法兼容多数浏览器，故在开发中还需要进行权衡和判断，选择合适的表达方式和ES规范。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ce76c8e46428fe9e8b69a4

babel-preset-env 的应用实战