@babel/plugin-proposal-class-properties
这个插件主要作用是用来编译类的。通常在webpack下配置的babel.config.js的内容如下
module.exports = {
presets: [ "@babel/preset-env", "@babel/preset-react" ],
plugins: [
"@babel/plugin-transform-arrow-functions", // 这个是箭头函数的处理
["@babel/plugin-proposal-decorators", {"legacy": true}], // 这个是装饰器
["@babel/plugin-proposal-class-properties", { "loose": false }], // 这里是关键
]
}
我们可以看到，{ "loose": false } 这个参数，这个参数会影响什么呢？看下面
没参数编译结果(默认{loose:false})：
var Bork = function Bork() {
babelHelpers.classCallCheck(this, Bork)
Object.defineProperty(this, 'x', { configurable: true, enumerable: true, writable: true, value: 'bar' })
Object.defineProperty(this, 'y', { configurable: true, enumerable: true, writable: true, value: void 0 })
}
Object.defineProperty(Bork, 'a', { configurable: true, enumerable: true, writable: true, value: 'foo' })
Object.defineProperty(Bork, 'b', { configurable: true, enumerable: true, writable: true, value: void 0 })
有参数{loose:true}编译结果：
var Bork = function Bork() {
babelHelpers.classCallCheck(this, Bork)
this.x = 'bar'
this.y = void 0
}
Bork.a = 'foo'
Bork.b = void 0
那么上面两个有什么区别呢？ 其实最大的却别就是，类编译后，对属性的定义不同。
loose=false时，是使用Object.defineProperty定义属性，loose-ture，则使用赋值法直接定义，那么属性定义与赋值有什么却别呢？
这个问题就复杂了，简单说一下吧。
- 赋值就是，常见的，用得最多的方法 this.a='abc' 就是赋值，定义就是需要使用Object.defineProperty方法对属性进行定义。 使用赋值时，是可能会触发属性的setter方法的。
- 定义法，就是完整的定义一个属性，可以定义属性的可读性、可写性、setter、getter等
