526互联

babel 简介

发布时间 2023-09-04 15:20:44作者: 软匠

Babel 是什么

Babel 是一个 Javascript 编译器

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

  • 语法转换
  • 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js）
  • 源码转换（codemods）
  • 更多参考资料

安装

使用 npm 安装 @babel/core @babel/cli @babel/preset-env

npm install --save-dev @babel/core @babel/cli @babel/preset-env

配置

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ]
}

转换

src/map.js

[1, 2, 3].map(n => n + 1);

const fn = () => 1;

转换

npx babel src --out-dir lib --presets=@babel/env

dist/map.js

"use strict";

[1, 2, 3].map(function (n) {
  return n + 1;
});
var fn = function fn() {
  return 1;
};

Polyfill

安装 @babel/polyfill

npm install --save @babel/polyfill

babel.config.json 添加 useBuiltIns 配置项

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Babel 会自动检测代码并包含需要的 polyfill

比如，因为 Edge 17 没有 Promise.prototype.finally 所以

Promise.resolve().finally();

会转换为

require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

如果配置是 "useBuiltIns": "entry" 那么需要在入口文件手动 import core-js

import "core-js/stable";