了解babel的作用、原理、基本使用，为什么有babel，以及在webpack中的babel-loader

news2024/11/15 18:48:45

一、为什么有babel？

babel是一个工具链，如今大多数的浏览器都支持es6+的语法和特性，但难免有些旧版本的浏览器是不支持的，为了兼容这些旧版本的浏览器，有了babel这一个 JavaScript 编译器。它能为我们做一些事情：对更高级的语法进行转换，引入第三方 polyfill 模块，对旧版本浏览器不支持的特性打补丁（补充缺失的功能）。

二、基本使用

1.命令行使用

安装以下包：

npm install @babel/cli @babel/core

运行此命令将 src 目录下的所有代码编译到 dist目录：

./node_modules/.bin/babel src --out-dir dist

也可以利用 npm@5.2.0 所自带的 npm 包运行器将 ./node_modules/.bin/babel 命令缩短为 npx babel

npx babel src --out-dir dist

babel将src目录下的文件都进行转换，并将转换后的代码输出到dist文件夹中。但这时候其实转换前和转换后的代码并无区别。原因是我们没有声明对指定的代码进行怎么样的转换，所以需要用到插件。

2.插件的使用

插件是小型的 JavaScript 程序，用于指导 Babel 如何对代码进行转换。例如我们需要将ES6+的代码转为ES5的，那么需要用到@babel/plugin-transform-arrow-functions插件

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

npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping

转换前和转换后的效果：

// 转换前
const fnc = () => console.log('箭头函数')

// 转换后
var fnc = function fnc() {
  console.log('箭头函数')
}

3.预设preset的使用

对于上面的语法转换，我们要针对指定代码进行转换，可能需要用到多个插件，如果转换的过多，需要一个个添加，无疑是非常麻烦的。针对这一弊端我们可以使用预设（即一组预先设定的插件）

对于上面的例子，我们只需安装@babel/preset-env包，就可以实现代码转换

npm install @babel/preset-env -D

npx babel src --out-dir dist --presets=@babel/preset-env

4.Babel的配置文件

我们可以将babel的配置信息放到一个独立的文件中，有两种编写方式：

babel.config.json（或者.js，.cjs，.mjs）文件；
.babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件；

这两种方式的区别：

.babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的；
babel . config .j son（babel 7 ）：可以直接作用于Monorepos项目的子包，更加推荐；

module.exports = {
  presets: [
    ["@babel/preset-env", {
      targets: "last 2 version"
    }]
  ]
}

5.polyfill的使用

如果我们使用了ES6的一些语法特性（例如Promise, Generator, Symbol），但是这些特性是新增的，我们可以使用polyfill来填充或者说打一个补丁，那么就会包含该特性了。

官网的一段描述， Babel 7.4.0 版本以上的我们使用@babel/core或@babel/plugin-transform-regenerator包，不再使用@babel/polyfill包。

babel7.4.0之后，可以通过单独引入core-js和regenerator-runtime来完成polyfill的使用

npm install core-js regenerator-runtime --save

我们需要在babel.config.js文件中进行配置，给preset-env配置一些属性：

配置之前，我们需要安装@babel/runtime-corejs3

npm install --save @babel/runtime-corejs3

module.exports = {
  presets: [
    ["@babel/preset-env", {
      useBuiltIns: "fasle",
      corejs: 3
    }]
  ]
}

useBuiltIns:设置以什么样的方式来使用polyfill,该属性有三个常见值

false: 打包后的文件不使用polyfill来进行适配，且这个时候是不需要设置corejs属性的.
usage：会根据源代码中出现的语言特性，自动检测所需要的polyfill，这样可以确保最终包里的polyfill数量的最小化，打包的包相对会小一些，可以设置corejs属性来确定使用的corejs的版本。
entry：如果我们依赖的某一个库本身使用了某些polyfill的特性，但是因为我们使用的是usage，所以之后用户浏览器可能会报错，如果担心这类问题，我们可以使用entry，这样做会根据browserslist目标导入所有的polyfill，但是对应的包也会变大。注意，我们需要在入口文件中导入两个包

import 'core-js/stable'; 
import 'regenerator-runtime/runtime';

corejs:设置corejs的版本，目前使用较多的是3.x的版本

三、babel在webpack中的使用

在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。

npm install babel-loader @babel/core

在webpack.config.js配置文件中配置

{
  test: /\.js$/,
    use:{
      loader: "babel-loader",
      options: {
        presets: [
          "babel/preset-env"
        ]
      }
    }
}

这时有个问题，我们打包项目后部署到浏览器上运行，那我们怎么知道需要转换到什么程度呢？

有两种解决方法：

targets属性

{
  test: /\.js$/,
    use:{
      loader: "babel-loader",
      options: {
        presets: [
          "babel/preset-env",
          {
            targets: "last 2 version"
          }
        ]
      }
    }
}