阅读 95

Babel 入门

这是我参与更文挑战的第 30 天,活动详情查看:更文挑战

Babel 是什么

Babel 算是一个编译器,通过一系列的工具,将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScrtip语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

看下面这段代码:

input.map(item => item + 1);
复制代码

这段代码使用了 ES6 的语法「箭头函数」,比较旧版本的浏览器不支持该语法,为了使页面在旧版本浏览器也能正常运行,我们就不得不放弃使用该语法进行开发。

而作为一名前端开发者,我们当然希望能够面向未来编程,使用更加便捷的语法,而又不需要过多地考虑兼容性问题。于是有了Babel的诞生,它替我们解决兼容性的问题,解决方案就是将我们代码中较新的语法,编译成兼容旧版浏览器的JavaScript语法,如下所示:

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});
复制代码

如何配置及使用 Babel

下面我们看一下如何在我们的项目中配置Babel

Babel本质是一个工具链,由大量的工具组成,每个工具都以单独的npm模块发布。它的核心功能包含在 @babel/core 模块中。

我们先创建一个项目文件夹myObject,进入该文件夹,npm初始化项目,然后安装@babel/core模块,如下所示:

> npm init -y  # 初始化项目
> npm install --save-dev @babel/core # 安装 @babel/core 
复制代码

为了能够通过命令行终端运行Babel工具,我们还需要安装@babel/cli

> npm install --save-dev @babel/cli
复制代码

现在我们在项目中新建一个src文件夹,并在其中创建一个test.js文件,内容如下:

input.map(item => item + 1);
复制代码

之后,我们可以通过以下命令行编译src文件夹内的代码,输出到lib文件夹内,如下:

> npx babel src --out-dir lib 
复制代码

lib文件夹内生成了文件test.js,但是文件内容却没有变化。这是因为Babel转换规则会体现为插件的形式,插件是小型 JavaScript 程序,它指示 Babel 如何进行代码转换。你甚至可以编写自己的插件,来应用你想要的任何转换规则。

为了实现「箭头函数」的转换,我们可以安装@babel/plugin-transform-arrow-functions插件,并执行相关命令,如下所示:

> npm install --save-dev @babel/plugin-transform-arrow-functions
> npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
复制代码

可以看到原代码中的箭头函数已经被转成了普通函数,如下所示:

// ./lib/test.js
input.map(function (item) {
  return item + 1;
});
复制代码

如果代码中还有其它 ES2015+ 功能也需要转换。我们可以使用一个 "preset",其中包含着一组预先设定的插件,而不是逐一添加我们想要的所有插件。如下所示:

> npm install --save-dev @babel/preset-env
> npx babel src --out-dir lib --presets=@babel/env
复制代码

可能你会觉得通过命令行传参数的方式太过麻烦,没关系,Babel提供了另一种方式:通过配置文件。

在项目文件夹创建文件babel.config.json,内容如下:

{
  "presets": [
    "@babel/env"
  ]
}
复制代码

现在运行Babel可以无需携带参数了:

> npx babel src --out-dir lib
复制代码

相关资料

Babel 入门教程

Babel 中文文档

文章分类
前端
文章标签