一、介绍

Babel 插件是用于扩展 Babel 编译器的功能的组件，它们可以添加新的语法、转换器、插件等，以便更好地适应不同的开发需求。在前端开发中，Babel 插件通常与打包工具（如 webpack）一起使用，以便将 ES6+ 代码转换为向后兼容的 JavaScript 代码，并打包成浏览器可以识别的静态资源。

以下是一些常见的前端 Babel 插件：

1、@babel/preset-env：一个用于根据目标环境自动加载相应的插件和 polyfill 的预设。它可以根据配置的目标环境（如浏览器、Node.js 等）自动加载相应的插件和 polyfill，以确保代码能够在该环境中运行。

2、@babel/preset-react：一个用于转换 React 代码的预设。它可以将 JSX 语法转换为普通的 JavaScript 代码，并支持一些常见的 React 语法特性（如状态更新、生命周期函数等）的转换。

3、@babel/plugin-proposal-class-properties：一个用于支持类属性语法的插件。它可以将类属性语法转换为普通的 JavaScript 代码，以便在现有的 JavaScript 运行时环境中运行。

4、@babel/plugin-transform-runtime：一个用于将 Babel 生成的辅助函数单独打包的插件。它可以将 Babel 生成的一些辅助函数单独打包成一个运行时库，并将其引入到每个模块中，以避免生成的代码冗余。

5、babel-plugin-transform-remove-console：一个用于移除 console.log 等 console 方法的插件。它可以帮助开发者在生产环境中移除无用的 console 方法，以减小代码体积和提高代码性能。

以上只是一些常见的前端 Babel 插件，实际上 Babel 提供了丰富的插件系统，可以根据开发需求自由选择并组合使用。

可以看出，babel为什么可以将 ES6+ 代码转换为向后兼容的 JavaScript 代码。就是因为它提供了插件（plugins），不断开发新的插件开壮大babel。因为babel插件很多，每个ECMA发布新的版本，他就会开发新的插件来支持。所以我们从ES3的插件开始，讲解一下重要的插件。虽然很多插件都已经集成到@babel/preset-env了，但是我们依旧需要了解，接下来我们来看看ES3的插件。

二、member-expression-literals

babel-plugin-transform-member-expression-literals 是 Babel 的一个插件，它用于将对象字面量中的属性访问器（accessor）转换为简化的成员表达式形式。例如，它可以将 obj['prop'] 转换为 obj.prop。

这个插件可以帮助开发者减少代码中不必要的字符和语法，提高代码的可读性和可维护性。这种优化在对象属性较多时尤为重要，因为使用成员表达式访问属性可以减少代码中的重复字符和冗余语法。

以下是一个示例：

// 转换前
const obj = {
  'prop-1': 1,
  'prop-2': 2,
  'prop-3': 3,
};

// 转换后
const obj = {
  prop-1: 1,
  prop-2: 2,
  prop-3: 3,
};

在这个例子中，我们可以看到插件将对象字面量中的属性访问器（accessor）转换为简化的成员表达式形式，从而使代码更加简洁和易读。

需要注意的是，虽然这个插件可以提高代码的可读性和可维护性，但它也可能会在某些情况下导致代码错误。例如，当对象属性包含了特殊字符或关键字时，会导致代码无法正常工作。因此，在使用该插件时需要谨慎，根据具体情况选择是否使用。

安装

npm install @babel/plugin-transform-member-expression-literals --save-dev
// or
yarn add @babel/plugin-transform-member-expression-literals --dev

使用

我们先使用babel cli来使用上面插件

1、CLI

我们在目录下新建src/index.js，并且在里面写字面量作为属性，下面代码：

// /src/index.js

obj.foo = "isValid";
obj.const = "isKeyword";
obj["var"] = "isKeyword";

所以我们可以使用插件转译一下。

npx babel --plugins @babel/plugin-transform-member-expression-literals src/index.js src -d dist

上面命令的意思使用babel的cli去执行src下面的index.js文件并且输出到src下的dist文件内。执行完命令以后：

// /src/dist/index.js

obj.foo = "isValid";
obj["const"] = "isKeyword";
obj["var"] = "isKeyword";

2、babel.config.json

使用babel.config.js配置来实现打包，在目录下新建babel.config.json

module.exports = { 
  plugins:[
    [
      '@babel/plugin-transform-member-expression-literals'
    ]
  ]
 };

执行命令：

npx babel src/index.js src -d build

得到

// src/build/index.js

obj.foo = "isValid";
obj["const"] = "isKeyword";
obj["var"] = "isKeyword";

3、Node API

使用node API实现打包。新建build.js

// src/build.js

const code = `
obj.foo = "isValid";
obj.const = "isKeyword";
obj["var"] = "isKeyword";
`
const data  = require("@babel/core").transformSync(code, {
    plugins: ["@babel/plugin-transform-member-expression-literals"],
});
console.log(data.code)

执行命令 node build.js

// 输出
obj.foo = "isValid";
obj["const"] = "isKeyword";
obj["var"] = "isKeyword";

所以这个可以提高代码的可读性和可维护性。同时其实也是在约束开发者对属性的命令。不然使用这个插件就会打包出错了。

三、reserved-words

babel-plugin-transform-reserved-words 是 Babel 的一个插件，它用于将 JavaScript 中的保留字（reserved words）转义为合法的变量名。

在 JavaScript 中，一些单词被保留用于特定用途（如 if、else、while、break、continue 等）。在某些情况下，我们需要使用这些保留字作为变量名，但直接使用会导致语法错误。这时，就需要使用 babel-plugin-transform-reserved-words 插件将保留字转义为合法的变量名。

以下是一个示例：

// 转换前
var abstract = 1;
var x = abstract + 1;

// 转换后
var _abstract = 1;
var x = _abstract + 1;

同理，你也可以使用三种方法来看看实现效果