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

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