在 ES6 中，类是一种新的对象类型，它可以通过 class 关键字来定义。ES6 类中的静态属性是一种相对于实例属性而言的属性，它是定义在类本身上而不是定义在实例上的属性。静态属性在类中的作用和用途非常广泛，但是在一些旧版的浏览器中并不支持静态属性，这就需要使用 Babel 来编译 ES6 类中的静态属性。
Babel 是什么？
Babel 是一个 JavaScript 编译器，它可以将 ES6/ES7/ES8 等版本的 JavaScript 代码转换为 ES5 的代码，从而让我们的 JavaScript 代码可以在旧版的浏览器中运行。Babel 的主要作用是将新版的 JavaScript 代码转换为旧版的 JavaScript 代码，让我们可以在不同版本的浏览器上运行相同的 JavaScript 代码。
如何使用 Babel 编译 ES6 类中的静态属性？
使用 Babel 编译 ES6 类中的静态属性非常简单，我们只需要在项目中安装 Babel，然后在 Babel 的配置文件中添加相应的插件即可。下面是一个简单的示例：
-- -------------------- ---- -------
-- -- -----
--- ------- ---------- ----------- ---------- ----------------- ---------------------------------------
-- ----- ---- --------
-
---------- -
-------------------
--
---------- -
-----------------------------------------
-
-在上面的示例中，我们首先安装了 Babel 和相关的插件，然后在 Babel 配置文件中添加了 @babel/plugin-proposal-class-properties 插件，这个插件可以让 Babel 编译 ES6 类中的静态属性。
静态属性的使用
ES6 类中的静态属性可以通过类本身来访问，也可以通过类的实例来访问。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------- - ------ ------------ - -------- ------ - -------- - ---------------------------------- -- ------- ----- ---------- - --- ---------- ------------------------------- -- -------
在上面的示例中，我们定义了一个名为 MyClass 的类，这个类中包含了一个静态属性 myStaticProp 和一个实例属性 myProp。我们可以通过类本身来访问静态属性 myStaticProp，也可以通过类的实例来访问实例属性 myProp。
结论
Babel 是一个非常强大的 JavaScript 编译器，它可以将新版的 JavaScript 代码转换为旧版的 JavaScript 代码，从而让我们的 JavaScript 代码可以在不同版本的浏览器上运行。ES6 类中的静态属性是一种非常常用的属性，但是在一些旧版的浏览器中并不支持静态属性，这就需要使用 Babel 来编译 ES6 类中的静态属性。在使用 Babel 编译 ES6 类中的静态属性时，我们只需要在项目中安装 Babel，然后在 Babel 的配置文件中添加相应的插件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67457234c1a23897ea95f044