在前端开发中，为了流畅地开发代码，Babel是很好的选择之一。 而在使用ES6以上的语法特性时，需要注意有些特性仍存在一些浏览器不支持的问题，Babel就可以将最新的ES6以上的语法特性转化为浏览器可以识别且支持的语法。 而@daybrush/babel-plugin-proposal-class-properties，即为一个Babel插件，主要用于解决JS中Class属性在特定环境下无法正确绑定的问题，并对其进行转码，使其可以在各个环境中正确运行。
安装
--- ------- ---------- ------------------------------------------------
配置
在.babelrc文件中添加此插件即可：
- ---------- ---------------------------------------------------- -
使用
当我们需要使用类似以下的Class属性时：
----- ---- -
----- - -
----- ----------
--
----------- - -- -- -
-----------------------------
--
-Babel会将其转化为：
----- ---- -
------------- -
---------- - - ----- ---------- --
---------------- - -- -- -
-----------------------------
--
-
-实例
下面，我们就来使用上述babel插件解决下面的问题：
当我们使用@babel/preset-env和core-js@3.0以上 来使用一些ES6以上的新特性（比如Array.prototype.flat），也需要配合@babel/plugin-proposal-class-properties一起使用，否则会遇到类似Cannot assign to read only property 'prop' of object '#<Object>'的问题
安装依赖：
--- ------- ---------- ---------- ----------- --------------------------------------- ----------------- ------- -------------------
配置.babelrc：
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
--
---------- -------------------------------------------
-示例代码：
----- --------- - --- ---- -- --- -----------
----- ------- -
---- - ------ -------
--- - -- -- -
-----------------------
--
-
----- --- - --- ----------
----------以上，我们就通过简单的配置和示例代码来使用@daybrush/babel-plugin-proposal-class-properties， 使得我们的代码在各个环境中正确运行。
更多Babel相关的配置可以参考官网：https://babeljs.io/docs/en/configuration。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5c51ab1864dac670b0