前言
ECMAScript 2015 (ES6) 引入了计算属性语法，可以使编写 JavaScript 代码变得更加灵活。但是，部分浏览器不支持这个新特性，因此需要使用 Babel 编译器将 ES6 代码编译为支持这些浏览器的 ES5 代码。
babel-plugin-transform-es2015-computed-properties-2 是一个可以将 ES6 计算属性语法转化为 ES5 代码的 Babel 插件。本文将介绍如何使用该插件，并提供示例代码。
安装
使用 npm 安装该插件：
npm install babel-plugin-transform-es2015-computed-properties-2
配置
将该插件添加到 .babelrc 文件的 plugins 中：
{
"plugins": [
"transform-es2015-computed-properties-2"
]
}使用方法
示例 1：基本使用
考虑以下示例代码：
const array = [1, 2, 3];
const index = 1;
const obj = {
[index]: array[index]
};
console.log(obj[index]); // 2这是一个使用 ES6 计算属性的 JavaScript 代码，其中对象 obj 的属性名为 index 变量的值，属性值为 array 数组中索引为 index 的元素。
使用 babel-plugin-transform-es2015-computed-properties-2 插件编译该代码：
const array = [1, 2, 3];
const index = 1;
const obj = {};
obj[index] = array[index];
console.log(obj[index]);可以发现，插件成功将计算属性转化为基本的赋值操作。
示例 2：使用 Object.assign
考虑以下示例代码：
const array = [1, 2, 3];
const index = 1;
const obj = Object.assign({}, {
[index]: array[index]
});
console.log(obj[index]); // 2这是一个使用 ES6 计算属性和 Object.assign 方法的 JavaScript 代码，其中对象 obj 的属性名为 index 变量的值，属性值为 array 数组中索引为 index 的元素。
使用 babel-plugin-transform-es2015-computed-properties-2 插件编译该代码：
const array = [1, 2, 3];
const index = 1;
const obj = Object.assign({}, {
[index]: array[index]
});
console.log(obj[index]);可以发现，插件成功将计算属性转化为对象字面量，并不影响 Object.assign 方法的使用。
总结
babel-plugin-transform-es2015-computed-properties-2 是一个非常实用的 Babel 插件，可以帮助我们编写更灵活的 JavaScript 代码。本文介绍了插件的使用方法和示例代码，在实际开发中可以结合项目需求进行调整和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8381e8991b448d9161