前端码农babel入门学习

2023-11-08 17:19:34

一、babel是什么

Babel官网上是这样说的：

Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用（并创建）下一代的 JavaScript，以及下一代的 JavaScript 工具。作为一种语言，JavaScript 在不断发展，新的标准／提案和新的特性层出不穷。在得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。这一过程叫做“源码到源码”编译，也被称为转换编译（transpiling，是一个自造合成词，即转换＋编译。以下也简称为转译）。

我理解的大概意思就是 JavaScript 不断发展，标准不断更新，但是有些新语法很多浏览器或其他环境是不支持的，为了码农们能够尽早的使用新的标准，又能有很好地兼容性，就能用babel将JavaScript 代码向下编译成可用的版本，即上面说的转译。

但是官网还说， Babel 的用途并不止于此，还支持语法扩展，能支持像 React 所用的 JSX 语法，同时还支持用于静态类型检查的流式语法，但是咱也不知道具体有啥用，就等之后再学吧，目前就先知道它常用来做转译。

另外，babel 本身不具有任何转译功能，主要靠 plugin 。因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。

二、模块

1、babel-core（核心）

babel 的核心 api 都在core这个模块中，这个模块会把我们写的 js 代码抽象成 AST 树，然后再将 plugins 转译好的内容解析为 js 代码，所以要想使用babel就必须安装babel-core。

2、babel-polyfill(内部集成了 core-js 和 regenerator)

babel 几乎可以编译所有时新的 JavaScript 语法，但一些新的 api却不行，polyfill 即是在当前运行环境中用来复制（意指模拟性的复制，而不是拷贝）尚不存在的原生 api 的代码。

3、babel-cli

babel 的 cli 是一种在命令行下使用 babel 编译文件的简单方法，安装之后就可以通过命令 babel xxx.js 进行转译。

4、babel-runtime & babel-plugin-transform-runtime

为了实现 ECMAScript 规范，Babel 转译后的代码需要借助一些函数，但是这些函数就可能重复出现在一些模块里，导致编译后的代码体积变大，babel-runtime 即可供编译模块复用工具函数，启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数。

5、babel-register

babel-register 模块改写了 require 命令，为它加上一个hook，只要在文件中用require引入的以.js、.jsx、.mjs、.es 和 .es6 为后缀的文件，都会先使用 babel 进行转译。

三、怎么用

1、`babel-cli`

首先需要安装 babel-cli

npm install --global babel-cli（全局安装）

然后随便写了一个Untitled-1.js文件，如下：

// Untitled-1.js
var fn = () => {
    console.log('这是一个箭头函数');
};

在终端切换到该文件目录下，执行：

babel Untitled-1.js -o compiled.js
// 或者
// babel Untitled-1.js --out-file compiled.js

可以把Untitled-1.js文件转译后的代码写到文件，此时只是复制，因为还未配置转译规则，转译后文件如下：

// compiled.js
var fn = () => {
    console.log('这是一个箭头函数');
};

`2、`构建工具的插件 (如webpack 的 babel-loader, rollup 的 rollup-plugin-babel)

安装依赖：

npm i -D babel-loader @babel/preset-env @babel/core

在build文件下的webpack.config.js文件中添加：

 module: {
     rules:[
         {
             test:/\.js$/,
             use:{
                 loader:'babel-loader',
             },
             exclude:/node_modules/
          }
     ]
}

执行命令：

npm run build

转译并打包后的代码如下：

3、babel-register

首先安装 babel-register

npm install --save-dev @babel/register

使用时先引入require('babel-register')，然后将需要转译的文件通过require()引入，即可实时转码，但此方法只适合在开发环境使用。

require("babel-register");
require("./index.js");

三、配置 Babel

由于没有配置规则，代码只是复制了一份，并没有变化，常用的配置方法有以下两种：

1、加到.babelrc（其他格式`.babelrc.json`, `.js`, `.cjs`, `.mjs）`中

新建.babelrc文件（.babelrc.json写法同），并在里边加入所需配置，如下：

{
  "presets": [],
  "plugins": []
}

配置说明：

(1) Preset（预设）

preset就好像是插件的集合，通过使用或创建一个 preset 即可轻松使用一组插件，比如@babel/preset-env就包含了所有跟ES6转换有关的插件，下面是举个

码农公寓