在前端开发中，为了流畅地开发代码，Babel是很好的选择之一。 而在使用ES6以上的语法特性时，需要注意有些特性仍存在一些浏览器不支持的问题，Babel就可以将最新的ES6以上的语法特性转化为浏览器可以识别且支持的语法。 而@daybrush/babel-plugin-proposal-class-properties，即为一个Babel插件，主要用于解决JS中Class属性在特定环境下无法正确绑定的问题，并对其进行转码，使其可以在各个环境中正确运行。
安装
npm install --save-dev @daybrush/babel-plugin-proposal-class-properties
配置
在.babelrc文件中添加此插件即可：
{
"plugins": ["@daybrush/babel-plugin-proposal-class-properties"]
}使用
当我们需要使用类似以下的Class属性时：
class Test {
state = {
name: "daybrush"
};
handleClick = () => {
console.log(this.state.name);
};
}Babel会将其转化为：
class Test {
constructor() {
this.state = { name: "daybrush" };
this.handleClick = () => {
console.log(this.state.name);
};
}
}实例
下面，我们就来使用上述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>'的问题
安装依赖：
npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env core-js regenerator-runtime
配置.babelrc：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
--
---------- -------------------------------------------
-示例代码：
-- -------------------- ---- -------
----- --------- - --- ---- -- --- -----------
----- ------- -
---- - ------ -------
--- - -- -- -
-----------------------
--
-
----- --- - --- ----------
----------以上，我们就通过简单的配置和示例代码来使用@daybrush/babel-plugin-proposal-class-properties， 使得我们的代码在各个环境中正确运行。
更多Babel相关的配置可以参考官网：https://babeljs.io/docs/en/configuration。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5c51ab1864dac670b0