vue-cli脚手架的.babelrc文件用法说明

Vue-cli是Vue.js官方提供的一个脚手架工具，可以快速构建Vue.js项目的基础结构。其中包含一个 .babelrc 文件，用于配置Babel转码器的参数。本篇攻略将详细讲解 .babelrc 文件的用法说明。

.babelrc文件用法说明

一、什么是babel

Babel 是一个 JavaScript 编译器，主要解决的问题是：JavaScript 语法的兼容性问题。

二、什么是.babelrc文件

.babelrc 文件是 babel 的配置文件，用于配置 babel 的转换规则和插件等。

在一个 Vue.js 项目中，通常包含一个 .babelrc 文件，用于指定要转换的 JavaScript 版本和插件。它是一个 JSON 格式的文件，可以配置多个转换规则。下面介绍部分常用的转换规则和插件。

1. Babel Preset

Babel Preset 是一组转换规则的集合，官方提供了多个 preset，根据需要可以选择使用。

常见的 preset 有：

• @babel/preset-env: 根据当前运行环境自动确定需要的转换规则。
• @babel/preset-react: 用于转换 React 的 JSX 语法。
• @babel/preset-typescript: 用于转换 TypeScript 的语法。

2. Babel Plugin

Babel Plugin 是一组转换规则的集合，官方提供了多个 plugin，根据需要可以选择使用。

常见的 plugin 有：

• @babel/plugin-transform-runtime: 用于转换新的 JavaScript 特性，如 Promise、Generator 等。
• @babel/plugin-proposal-class-properties: 用于转换 ES6 class 的属性。
• @babel/plugin-syntax-dynamic-import: 用于转换import() 动态导入的语法。

三、配置示例

下面通过两个示例来演示 .babelrc 文件的用法。

1. ES6转ES5

如果需要将 ES6 的代码转成 ES5 的代码，可以使用 @babel/preset-env，其会自动根据运行环境选择需要的转换规则。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 9"]
        }
      }
    ]
  ]
}

在上述代码中，通过 "targets" 参数指定了要转换的目标浏览器，将其中的 ES6 代码转换成 ES5 代码，以保证 ES6 代码可以在更早的浏览器中运行。

2. 转换JSX语法

如果需要在 Vue.js 中使用 React 官方提供的 UI 组件库，需要将其中的 JSX 语法转成 Vue.js 中的模板语法。

可以使用 @babel/preset-react 来实现。假设需要将以下代码中的 JSX 转换成普通的 JavaScript 代码：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, World!</h1>,
  document.getElementById('root')
);

可以配置 .babelrc 文件如下：

{
  "presets": ["@babel/preset-react"]
}

这样就可以将 JSX 语法转成常规的 JavaScript 代码。