babel配置vue(@vue-cli-plugin-babel-preset)

@vue/cli-plugin-babel/preset是Vue CLI中用于配置Babel的预设插件。Babel是一个用于将新版JavaScript代码转换为向后兼容版本的工具，它可以将ES6+的代码转换为ES5的代码，以便在旧版浏览器中运行。@vue/cli-plugin-babel/preset提供了一组预设的Babel插件，用于处理Vue项目中的代码转换。

在Vue项目中使用@vue/cli-plugin-babel/preset，需要在项目的根目录下的babel.config.js文件中进行配置。该文件是Babel的配置文件，用于指定Babel的转换规则和插件。

示例代码如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

在上述示例代码中，我们可以看到presets数组中引入了@vue/cli-plugin-babel/preset插件。这意味着我们将使用该预设插件来进行代码转换。

@vue/cli-plugin-babel/preset内部包含了一系列的Babel插件，用于处理不同的转换任务。这些插件包括：

- @babel/preset-env：根据目标浏览器或运行环境的配置，将ES6+的代码转换为ES5的代码。它根据目标环境的支持情况，自动选择需要的转换插件，以减少转换后的代码体积。

- @babel/preset-typescript：用于将TypeScript代码转换为JavaScript代码。

- @babel/preset-react：用于将React的JSX语法转换为普通的JavaScript代码。

通过配置@vue/cli-plugin-babel/preset，我们可以根据项目的需要进行代码转换。例如，如果我们的项目需要支持ES5的浏览器，可以配置@babel/preset-env插件，示例代码如下：

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        targets: {
          browsers: ['IE 11']
        }
      }
    ]
  ]
}

在上述示例代码中，我们通过传递一个配置对象给@vue/cli-plugin-babel/preset，指定了目标浏览器为IE 11。这样，Babel会根据IE 11的支持情况，自动选择需要的转换插件，将ES6+的代码转换为兼容IE 11的ES5代码。

除了预设插件外，我们还可以在babel.config.js文件中配置其他的Babel插件，以满足项目的特殊需求。例如，如果我们需要使用装饰器语法，可以配置@babel/plugin-proposal-decorators插件，示例代码如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]
}

在上述示例代码中，我们通过plugins数组配置了@babel/plugin-proposal-decorators插件，并传递了一个配置对象，指定了装饰器语法的转换规则。

总结来说，@vue/cli-plugin-babel/preset是Vue CLI中用于配置Babel的预设插件。通过配置该插件，我们可以根据项目的需要，将ES6+的代码转换为向后兼容的版本，以便在旧版浏览器中运行。我们还可以根据项目的特殊需求，配置其他的Babel插件，以满足代码转换的要求。