什么是babel-plugin-syntax-class-properties?
babel-plugin-syntax-class-properties 是一个用于 Babel 的插件，它为 babel-parser 添加了对 ES6+ class 属性语法的支持。它使得 Babel 可以识别类属性，并将其转换成可在目标环境中使用的代码。
安装
你可以通过 NPM 来安装 babel-plugin-syntax-class-properties：
npm install --save-dev babel-plugin-syntax-class-properties
安装完成后，在 babel 配置文件中添加插件：
{
"plugins": [
"syntax-class-properties"
]
}如何使用
使用 babel-plugin-syntax-class-properties 可以让我们在 ES6+ 类中使用类属性语法。例如：
class MyClass {
myProperty = 'myValue';
}这段代码可以通过 babel 转译为 ES5 代码，从而能够在不支持类属性语法的环境中运行：
-- -------------------- ---- -------
---- --------
-------- ------------------------------- ----------- ------ -----
-------- ----------------------------------------- ----------------- ----------- -----
--- ------- - -------- --------- -
--------------------- ---------
--------------------- -
--------- -----
------ ---- -
---
---------------------------------------- -------- -------------------- ------------------------------------------------------------------
--
--- ------------------- - -
----------- -
----- -------------
------------ -------- -- -
------ ----------
-
-
--
--- ----------- - --- ----------
----------------------------- - -------- -- -----示例
下面是一个示例，演示 babel-plugin-syntax-class-properties 如何将 ES6+ 的类属性语法转换为 ES5 代码：
-- -------------------- ---- -------
-- --------------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
----- - -
------ --
--
----------- - -- -- -
------------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
-----
---------------------------
--------- ----------------------
------- ---------------------------------------------
------
--
-
-
------ ------- ------------运行 babel src -d lib --plugins=@babel/plugin-proposal-class-properties 将其编译为 ES5 代码：
-- -------------------- ---- -------
---- --------
------------------------------ ------------- -
------ ----
---
--------------- - ---- --
--- ------ - -----------------------------------------
--- ---------------- - -------------------------------------------------------------------------
--- ---------------- - -------------------------------------------------------------------------
--- ------------- - ----------------------------------------------------------------------
--- ---------- - -------------------------------------------------------------------
--- --------------------------- - ------------------------------------------------------------------------------------
--- ---------------- - -------------------------------------------------------------------------
--- ----------- - -----------------------------
--- ----------- -
-------------
-------- ------------ -
--- -------------------------------- ------------
-------- ------------- -
--- ------
--- ------------------------------- -------------
----- - --- ------------------------------------------ --- ---------------------------------------------------
--- -------------------------------- -------- -
------ -
---
--- -------------------------------- -------------- -------- -- -
----------------------- ----------- -
------ -
------ --------------- - -
--
---
---
------ ------
-
--- ----------------------------------- --
---- ---------
------ -------- -------- -
------ ---------------- ------------------------ -
--------- ----------------- ---------------------- -
--------- ----------------
--- ---------------- --------------------- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------