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

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

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

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

目录

 一、安装 

1. 了解命令行工具  

2.安装Babel 

 3.使用Babel

二、实践验证

1.@babel/core

1.1 新建 testBabelCore.js文件  

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

2.@babel-cli

2.1 新建 testBabelCli.js 文件

2.2 运行结果 

3. @babel/polyfill 

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 安装到每个项目的 本地 目录下。主要原因有以下两点：

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

 

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 文件应当包括如下内容：

  

 

 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

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

1.1 新建 testBabelCore.js文件  

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

//testBabelCore.js

var 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 是允许使用命令行来编译文件，即直接生成一个转译好的目标文件，方便快捷。

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

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中新增的内置函数，可以进行转译。官方文档没怎么说，但在实践中是必不可少的。

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/polyfill

npm 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博客