Babel 7入门基础知识实践案例篇【2】推荐

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

我们前面回顾webpack入门基础知识的时候已经已经了解过了。

并且在Babel入门基础知识实践案例篇【1】已经梳理了Babel的概念、代码转译的过程、常用的预设preset、Babel的核心概念@babel/core以及集成 @babel-cli、@babel-register、@babel-polyfill 等基础知识。

一、安装

1. 了解命令行工具

Babel%C2%A0-toc" style="margin-left:80px;">2.安装Babel

Babel-toc" style="margin-left:80px;"> 3.使用Babel

二、实践验证

1.@babel/core

BabelCore.js%E6%96%87%E4%BB%B6%C2%A0%C2%A0-toc" style="margin-left:120px;">1.1 新建 testBabelCore.js文件

1.2 安装@babel/preset-env并添加配置处理后运行

2.@babel-cli

BabelCli.js%20%E6%96%87%E4%BB%B6-toc" style="margin-left:120px;">2.1 新建 testBabelCli.js 文件

2.2 运行结果

3. @babel/polyfill

BabelCli.js%E6%96%87%E4%BB%B6-toc" style="margin-left:120px;">3.1 修改 testBabelCli.js文件

3.2 执行结果

3.3 安装依赖并修改babel.config.js全局配置文件

3.4 @babel/plugin-transform-runtime 还有一个作用：可以解决编译后的辅助代码重复定义的问题。

Babel是工具链，其本身不具备转化功能，而是将转化功能分解到插件中，不过不配置任何插件，经过Babel的代码输入和输出是没有区别的，这里我们进行实践来验证一下。

一、安装

Babel 自带了一个内置的 CLI 命令行工具，可通过命令行编译文件。

1. 了解命令行工具

虽然可以将 Babel CLI 安装到全局环境中，但是更好的方式是将 Babel CLI 安装到每个项目的本地目录下。主要原因有以下两点：

同一台计算机上的不同项目可能依赖不同版本的 Babel，并且你可以针对项目单独升级 Babel 的版本
对你所用的环境没有隐性依赖，这能让你的项目更易于迁移和设置

Babel%C2%A0">2.安装Babel

win+r 输入cmd 打开命令行工具安装babel：npm install --save-dev @babel/core @babel/cli

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

如果不存在 package.json 文件，请在安装之前创建一个。这将确保能够使用 npx 命令。

安装完成后，你的 package.json 文件应当包括如下内容：

Babel"> 3.使用Babel

现在我们就可以通过指令 npx babel script.js 使用Babel了。

注意： 请在执行 npx babel 之前首先要安装 @babel/cli 和 @babel/core ，否则 npx 将安装老旧的 babel 6.x 版本。

二、实践验证

Babel我们已经安装好了，现在我们可以进行实践过程了。

1.@babel/core

前面回顾Babel基础知识梳理了Babel的核心@babel/core

主要负责代码的解析、转译、产生。

BabelCore.js%E6%96%87%E4%BB%B6%C2%A0%C2%A0">1.1 新建 testBabelCore.js文件

验证：箭头函数是否可以转换成es5写法没有定义转译版本的情况下执行js文件

//testBabelCore.jsvar babel = require("@babel/core")
var sourceCode = `[1,2,3].map(n => n*n)`;babel.transform(sourceCode,options,function(err,result){if(err){console.error(err);return}console.log('sourceCode =====',sourceCode);console.log('result.code =====',result.code);console.log('result=====',result);
})

执行结果：箭头函数经过转换没有变化，因为在官网中有说到 @babel/core是核心，但是具体转译为哪个版本的 js，需要用户自己定义。

现在我们安装@babel/preset-env并添加配置处理。

1.2 安装@babel/preset-env并添加配置处理后运行

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

新建babel.config.json 文件

{"presets": [["@babel/preset-env",{"useBuiltIns": "entry","corejs": "3.22"}]]}

执行结果：成功把es6代码转换成es5代码了。

2.@babel-cli

@babel/core和 @babel/preset-env已经满足我转译代码的需求，但是之前需要转译的源代码是一行就可以写完的，如果我要转译成千上万行的代码呢？前面提到@babel/cli 是允许使用命令行来编译文件，即直接生成一个转译好的目标文件，方便快捷。

我们预期：生成编译之后的文件

BabelCli.js%20%E6%96%87%E4%BB%B6">2.1 新建 testBabelCli.js 文件

命令行执行命令：npx babel testBabelCli.js --out-file testBabelCli-compiled.js

npx babel  testBabelCli.js --out-file  testBabelCli-compiled.js

2.2 运行结果

运行结果：

3. @babel/polyfill

对 js中新增的内置函数，可以进行转译。官方文档没怎么说，但在实践中是必不可少的。

BabelCli.js%E6%96%87%E4%BB%B6">3.1 修改 testBabelCli.js文件

把babel.config.js 宿主环境设置成ie8 之后再次转译文件。这两行代码中，包含const关键词和includes数组方法，这些都是ES6的新增的语法和API，IE8不支持，理论上这两个方法都应该被转译。

3.2 执行结果

执行一下命令：

npx babel testBabelCli.js --out-file  testBabelCli-compiled.js

发现只有 const 被转译成了，includes方法未被转译。这样程序在IE8 是会报错的。

我们看下控制台，发现提示我们corejs3 polyfill has not been found 说没有找到这个插件。为什么没有找到呢？虽然@babel/presets-env是由一堆plugin组成，但是像includes这样的API默认是没有处理它的包的。

对于向includes这样比较新的js内置函数可以通过引入@babel/polyfill进行转译。

@babel/polyfill包含 regenerator runtime 和 core-js。

core-js 是针对ES6+新特性API 提供ployfill的库，适配低版本的浏览器。所以上面需要转译includes方法没有找到core-js所以就报错了。

而regenerator runtime 是因为 babel 对 async/await、yield这样的生成器代码转译为在执行时需要调用 regeneratorRuntime方法，这个方法就定义在regenerator runtime中，其实就是Babel对 regenerator runtime对依赖引用。

我们修改testBabelCli.js文件之后重新执行，发现确实有调用regeneratorRuntime方法的。

3.3 安装依赖并修改babel.config.js全局配置文件

安装依赖

npm install --save @babel/polyfillnpm install --save-dev @babel/plugin-transform-runtime

//设置polyfill引入的方式  usage是按需引入  entry是全部引入 显然，usage使用更合理一些{"presets": [["@babel/preset-env",{"useBuiltIns": "usage",  "targets":{"ie":"8"},"debug":true}]],"plugins": [[ "@babel/plugin-transform-runtime",{"corejs": "3"}]]}

执行testBabelCli.js文件

npx babel testBabelCli.js --out-file  testBabelCli-compiled.js

这里显示要引入包@babel/runtime-corejs3，获取到方法_interopRequireDefault。

这个包是代码运行时用到的，所以也是要安装在dependency里的。

3.4 @babel/plugin-transform-runtime 还有一个作用：可以解决编译后的辅助代码重复定义的问题。

我们把babel.config.js 中文件稍作修改，并且重新运行，看到编译后的文件定义并调用了一个_classCallCheck方法。

下面我们在babel.config.js中加上@babel/plugin-transform-runtime插件配置，重新运行。

可以看到编译后的文件_classCallCheck2这个方法是定义在@babel/runtime-corejs3中的。编译后的代码直接引用调用就可以，不需要再定义了。

到这里Babel 7的基础知识以及实践案例验证都回顾完了。

希望通过阅读文章我们对Babel能有基本的了解，有问题欢迎评论区交流，谢谢。

Babel7基础知识及实践【1】请参考：Babel 7入门基础知识全面实践案例篇【1】推荐。-CSDN博客