前端码农babel入门学习

2021-04-08 15:57:21 阅读：181 来源： 互联网

一、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转换有关的插件，下面是举个

标签：入门,babel,代码,js,Babel,preset,转译,码农
来源： https://blog.csdn.net/DZY_12/article/details/115482480

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9