简介
Babel 是一个 JavaScript 编译器，能够将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 代码。在 Vue 项目中，Babel 通常用于将最新版本的 JavaScript 代码转换为向后兼容的代码，以确保项目能够在各种浏览器上运行。
安装 Babel
Babel 的安装很简单，只需要在项目中安装 babel/core 和 babel-loader 即可。可以使用 npm 或 yarn 进行安装：
npm install --save-dev @babel/core babel-loader
yarn add --dev @babel/core babel-loader
配置 Babel
在 Vue 项目中配置 Babel 需要创建一个名为 .babelrc 的配置文件。在该文件中，可以指定要使用的插件和预设，
指定插件
Babel 插件用于转换代码中的具体特性。可以使用 preset 中的推荐插件或指定特定的插件。例如，要使用 Babel 转换 async/await，需要使用如下插件：
npm install --save-dev @babel/plugin-transform-runtime
yarn add --dev @babel/plugin-transform-runtime
在 .babelrc 文件中添加如下配置：
{
"plugins": ["@babel/plugin-transform-runtime"]
}指定预设
Babel 预设是一组插件的集合，用于提供一个可定制的转换环境。可以使用默认预设，也可以指定自定义预设。例如，要使用 Babel 转换 ES6，可以使用如下预设：
npm install --save-dev @babel/preset-env
yarn add --dev @babel/preset-env
在 .babelrc 文件中添加如下配置：
{
"presets": ["@babel/preset-env"]
}除了 @babel/preset-env，还有其他预设可供选择，例如 @babel/preset-react，适用于 React 项目。
配置 Webpack
要将 Babel 与 Vue 结合使用，需要在 webpack.config.js 文件中配置 Babel。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- --------------
-
--
-
----- ---------
------- ------------
--
-
-
-在上述代码中，我们在 Webpack 配置文件中添加了一个名为 babel-loader 的模块，用于将 ES6 的代码转换为浏览器可执行的 JavaScript 代码。同时，我们还添加了一个名为 vue-loader 的模块，用于将 Vue 单文件组件转换为可使用的模块。
示例代码
下面是一个使用 async/await 的示例代码：
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const json = await response.json();
return json.title;
}转换后的代码如下所示：
-- -------------------- ---- -------
--- ---------------------- - --------------------------------------------------------
---------------------------------------------
--------------------------------------
----------------------------------------------
--- ------------------ - ---------------------------------------------------------------------------
-------- --------- -
------ -------------------- -----------
-
-------- ---------- -
-------- - --- ---------------------------- --------------------------------------------- --------- -
--- --------- -----
------ -------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ ------------------------------------------------------
---- --
-------- - --------------
------------- - --
------ ----------------
---- --
---- - --------------
------ ------------------------- ------------
---- --
---- ------
------ ----------------
-
-
-- ---------
----
------ -------------------- -----------
-总结
在 Vue 项目中使用 Babel 可以确保项目能够运行在各种浏览器上。配置 Babel 需要安装对应的插件和预设，并在 Webpack 配置文件中添加 babel-loader 模块来完成转换工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476e13d968c7c53b037be73