babel笔记

 

babel

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

大致看了一些浏览器对ES6的支持情况，发现主流的浏览器基本上都是支持ES6的，这就是很多新手没有用过babel，很荣幸我也是其中的一位。但是随着ES版本的更新，babel还是有用武之地的。

核心库（ @babel/core ）

npm install --save-dev @babel/core

核心库常常和其他的库配合使用。

控制台工具（CLI tool）

控制台工具安装后可以通过控制台执行babel转化

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

npx babel src --out-dir lib
# 执行命令后将根目录下src文件夹内所有js文件转化后移入lib文件夹中

插件（Plugins）

babel提供很多插件用以定制化转化方法，打开node_modules/@babel有很多以plugin开头的文件就是插件

npm install --save-dev @babel/plugin-transform-arrow-functions

npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
# 调用插件进行转换，会将箭头函数转为普通函数

上面的方式是通过命令行转换js文件，如果需要需要很多插件的时候就需要一个配置文件babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
    },
  ],
];
/**
 * 插件的三种形式
 * 1、单个插件
 * 2、插件数组
 * 3、参数
 */
const plugins =  ["pluginA", ["pluginA"], ["pluginA", {}]];

module.exports = { presets, plugins };

插件的短名称

如果插件名称的前缀为 babel-plugin-，你还可以使用它的短名称：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 两个插件实际是同一个
  ]
}

这也适用于带有冠名（scope）的插件：

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 两个插件实际是同一个
  ]
}

预设（Presets）

预设是一种插件的组合，对一些特定环境使用，简化人为的插件组合。常用的环境有：

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

首先需要先安装@babel/preset-env

npm install --save-dev @babel/preset-env
npx babel src --out-dir lib --presets=@babel/env 

转化的时候会识别配置文件babel.config.js中的env配置

预设有短名称

{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // equivalent
  ]
}

适用于带有冠名（scope）的 preset：

{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // equivalent
  ]
}

插件和预设的执行顺序

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

附加（@babel/polyfill）

为了使某些功能能够正常工作。你可以 通过引入 @babel/polyfill 来满足 Babel 功能的 所有 需求。