随着前端技术的不断发展，ES6 的 class 继承已经成为了前端开发中不可或缺的一部分。然而，在一些低版本浏览器中并不支持 ES6 class 继承，这就需要借助 Babel 进行编译转换。
Babel 简介
Babel 是一个 JavaScript 编译器，它的主要作用是将最新的 JavaScript 语法转换成支持当前浏览器的低版本 JavaScript 语法。Babel 可以将 ES6、ES7 等最新的 JavaScript 语法转换成 ES5 的语法。
ES6 class 继承是一个非常强大的特性，但是在一些低版本浏览器中并不支持。因此，我们需要使用 Babel 将 ES6 class 继承转换成 ES5 的语法，以保证代码在低版本浏览器中的兼容性。
安装 Babel
首先，我们需要安装 Babel。Babel 的安装非常简单，只需要在命令行中执行以下命令即可：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
配置 Babel
Babel 的配置非常灵活，我们可以根据自己的需求进行配置。在这里，我们只需要简单地配置一下 Babel，使其能够编译 ES6 class 继承即可。
在项目根目录下新建一个名为 .babelrc 的文件，输入以下内容：
{
"presets": ["@babel/preset-env"]
}这里我们使用了 @babel/preset-env 这个 preset，它可以根据当前的环境自动确定需要转换的 JavaScript 语法。
编译 ES6 class 继承
现在，我们已经完成了 Babel 的安装和配置，接下来就可以开始编译 ES6 class 继承了。
假设我们有如下的 ES6 class 继承代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
------------------------- ----- - ---------
-
-
----- --- ------- ------ -
------- -
------------------------- ---------
-
-
----- --- - --- -------------
------------我们可以使用 Babel 将其编译成 ES5 的语法：
-- -------------------- ---- -------
---- --------
-------- ------------------- ----------- -
-- ------- ---------- --- ---------- -- ---------- --- ----- -
----- --- ---------------- ---------- ---- ------ -- ---- -- - -----------
-
------------------ - ------------------------ -- --------------------- -
------------ -
------ ---------
--------- -----
------------- ----
-
---
-- ------------ ------------------------------- ------------
-
-------- --------------------- - ------ -------- -- - --- ----- - ------------------------- ------- -- ----------------------------- - --- --------- - ---------------------------------- ------ - ------------------------ ---------- ----------- - ---- - ------ - ----------------- ----------- - ------ -------------------------------- -------- -- -
-------- -------------------------------- ----- -
-- ----- -- ------- ---- --- -------- -- ------ ---- --- ------------ -
------ -----
-
------ -----------------------------
-
-------- ---------------------------- -
-- ----- --- ---- -- -
----- --- -------------------- ------ ---- ----------- - ------- ------ ---- ---------
-
------ -----
-
-------- ------------------ -
--------------- - --------------------- - --------------------- - -------- ------------------ -
------ ----------- -- -------------------------
--
------ -------------------
-
-------- --------------------------- -
-- ------- ------- --- ----------- -- ------------------- ------ ------
-- ------------------------ ------ ------
-- ------- ----- --- ----------- ------ -----
--- -
---------------------------------------------------- --- -------- -- -----
------ -----
- ----- --- -
------ ------
-
-
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
--- ------ - --------------------- -- -
-------- ------------ -
--------------------- --------
--------- - -----
-
---------------------- - -------- ------- -
-------------------------------- - ----- - ----------
--
------ -------
----
--- --- - --------------------- --------- -
-------------- ---------
--- ------ - ------------------
-------- ----- -
--------------------- -----
------ ------------------ -----------
-
------------------- - -------- ------- -
-------------------------------- - ----------
--
------ ----
----------
--- --- - --- -------------
------------可以看到，Babel 将 ES6 class 继承转换成了 ES5 的语法，并且添加了一些额外的代码，以保证代码的正确性。
总结
通过本文的介绍，我们了解了如何使用 Babel 编译 ES6 class 继承，并且掌握了 Babel 的基本用法。在实际开发中，我们可以根据自己的需求进行 Babel 的配置，以实现更加灵活的编译转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6587da86eb4cecbf2dd11a5a