vue-cli中的babel配置文件.babelrc实例详解

Vue-cli中的babel配置文件.babelrc实例详解，这涉及到Vue-cli项目的ES6转码和其他一些相关问题。

1. Babel是什么?

Babel是一个广受欢迎的JavaScript编译器，它可以将ES6(ES2015)以上的JavaScript代码编译为ES5代码。由于许多浏览器缺乏支持，因此Babel可以使你在更多的浏览器环境中实现更先进的JavaScript功能。

2. babelrc是什么？

babelrc是Babel的配置文件，可以在其中定义一些Babel的插件和预设，以告诉Babel如何转化代码。

3. babelrc的格式

格式非常简单，文件内容必须是有效的 JSON 对象。

4. babelrc常用配置实例

一个常见的babelrc配置文件如下：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

在这个例子中，我们使用了两个插件：preset-env和plugin-transform-runtime。

• @babel/preset-env：可以根据项目的需要自行设置编译目标浏览器的环境。如果你想支持所有现代浏览器，可以将targets设置为"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]，这样该插件会根据浏览器版本和功能支持程度来提供编译包，该配置可以实现
• 对于任何用户，都允许使用大多数新功能。
• 仍然提供浏览器兼容性。

• 只编译必要的polyfills。这样，避免向每个用户发送相同的大型polyfill包。

• @babel/plugin-transform-runtime：

• 将Babel注入的帮助程序置于模块之外，以避免重复。 该插件通过@babel/runtime组件引入，因此该包只添加一次，从而减小打包包的大小。

5. babelrc使用过程中的注意事项

在使用babelrc的时候，一定要遵循以下几个原则：

1. 不要使用过多的插件，默认情况下，env预设将启用大多数的插件，不需要添加太多其他插件。

2. 只需添加必要的插件。 如果您使用了第三方库，您应该首先查看其README文件，该文件通常会说明库依赖于哪些babel插件或预设。

6. 总结

在Vue-cli项目中，我们可以通过babelrc的配置文件来设置我们需要的插件和预设，以便我们根据项目的具体需求进行转码，并减小我们打包出来的JavaScript代码体积。 Babel的强大功能，使我们开发出更加美妙的JavaScript应用程序，让我们更早地进入现代JavaScript生态系统中。