Web前端最全史上最简单的Babel入门教程，2024年最新字节跳动客服面试情景模拟

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

touch index.js

一顿操作以后，我们新建的项目目录为：

/babel-basic

|- /src

|- index.js

|- package.json

然而，package.json 是最原始的配置，而 index.js 暂时没有代码：

{

“name”: “babel-basic”,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1”

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {}

}

@babel/core

---

学习 Babel，首先要了解一个叫 @babel/core 的东西，它是 Babel 的核心模块，所以首先要安装：

npm i --save-dev @babel/core

安装成功之后就可以在我们的代码中使用了, 你可以采用CommonJS 的引用方式：

const babel = require(‘@babel/core’);

babel.transform(“code”, options);

这里的知识点有很多, 不过你不用急于的掌握它, 只需要知道它是Babel 的核心, 让我们接着往下看。

@babel/cli

---

这是一个终端运行工具，内置的插件，运行你从终端使用 babel 的工具。同样也需要安装：

npm i --save-dev @babel/cli

接着，在 src/index.js 中写一段简单代码：

const fn = () => 1; // 箭头函数, 返回值为1

console.log(fn());

用法一：命令行的形式

babel src --out-dir lib

这行代码的意思是：它使用我们设置的解析方式来解释 src 目录下的所有 js 文件，并将转换后的每个文件都输出到 lib 目录下。

但是，到目前为止我们并没有设置任何的解析方式，所以在执行这行代码后，能看到项目中多了一个 lib 目录，里面的代码和 src 目录中的是一致的。至于如何设置解析方式，就涉及到后面讲的 plugins 和 presets 了。

另外，还可以通过 npx babel src --out-dir lib 来代替上面的命令，两者的结果是一致的。

用法二：给 package.json 中配置命令：

{

“name”: “babel-basic”,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

•   "build": "babel src -d lib"
  

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

•   "@babel/cli": "^7.8.4",
  

•   "@babel/core": "^7.8.4"
  

}

}

运行 npm run build 效果也是一致的。上面的 -d 是 --out--dir 的缩写。

plugins

---

plugins 的本质是一个 js 程序，指示着 Babel 如何转换代码，如何解析代码。

案例：

在上面的例子中，我们在 index.js 中写了一个箭头函数，然而箭头函数在低版本浏览器是不兼容的，所以得进行代码转换，将箭头函数转换为普通的函数，这里就涉及到怎么设置 babel 的代码解析方式了。

官方提供了一个插件，用于将箭头函数转换为普通的函数：

npm i --save-dev @babel/plugin-transform-arrow-functions

安装完成后就可以通过命令行的方式来运行：

npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

结果在 lib 目录中的代码被转换了：

const fn = function () {

return 1;

}; // 箭头函数, 返回值为1

console.log(fn());

虽然已经实现了箭头函数的转换功能，但是其他的 ES6+ 语法还是不能进行转换的，这是因为我们使用的这个插件仅仅支持函数转换。那么问题来了，ES6+ 有那么多语法，如果一个浏览器不支持 ES6+ ，那么我们不就需要安装很多这样的插件吗？？

Presets

---

上面问题的答案显然是否定的，Presets 正是用于解决这种问题的。它是一组插件的集合，可以使用官方的，也可以自己自定义。

@babel/preset-env

这是一个将 ES6+ 转换为低版本代码的插件集合。

安装：

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

比如：我们使用 ES7 的乘方运算符和函数参数支持尾部逗号：

const fn = () => 1; // ES6箭头函数, 返回值为1

let num = 3 ** 2; // ES7求幂运算符

let foo = function(a, b, c, ) { // ES7参数支持尾部逗号

console.log(‘a:’, a)

console.log(‘b:’, b)

console.log(‘c:’, c)

}

foo(1, 3, 4)

console.log(fn());

console.log(num);

命令行运行：

npx babel src --out-dir lib --presets=@babel/preset-env

结果，在 lib 目录下的代码进行了转换：

“use strict”;

var fn = function fn() {

return 1;

}; // 箭头函数, 返回值为1

var num = Math.pow(3, 2);

var foo = function foo(a, b, c) {

console.log(‘a:’, a);

console.log(‘b:’, b);

console.log(‘c:’, c);

};

foo(1, 3, 4);

console.log(fn());

console.log(num);

好了，到目前为止我们了解了 @babel/core、@babel/cli、plugins、presets，但是你会发现一个问题，我们一直使用命令行的方式来执行代码，这显然不是简洁的方式，所以，接下来我们需要将这些复杂的命令做成配置项。

配置

---

在项目中创建一个 babel.config.js 文件：

const presets = [

[

“@babel/env”,

{

targets: {

edge: “17”,

chrome: “64”,

firefox: “60”,

safari: “11.1”

}

}

]

]

module.exports = { presets };

加上这个配置的作用是：

• 使用了 env preset

• env preset 只会为目标浏览器中没有的功能加载转换插件

现在，我们只需要使用命令 npm run build 这个命令就可以进行代码转换了。然而，你会好奇 Babel 是如何找到这个配置文件的呢？答案是默认情况下它会去项目的根目录找一个名为 babel.config.js 的文件（或者 babelrc.js）作为配置文件。

如何非得改这个配置文件的名称，那么我们的命令就需要带上参数了：

{

“scripts”: {

“build”: “babel src -d lib --config-file ./babel.config.js”

}

}

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】