Vite 是一个快速的 Web 开发构建工具，它通过利用现代浏览器原生的 ES Modules 功能来实现更快速的构建和热编译，但是由于某些限制，Vite 不支持一些不支持 ES Modules 的浏览器或运行环境。为此，我们可以使用 Babel 来对代码进行 转换 和 编译 以支持更广泛的环境。
安装 Babel
在使用 Babel 之前，我们需要先在项目中安装它以及它的一些 plugins 和 presets。我们可以使用下面的命令进行安装：
--- ------- -- ----- ----------- ---------- ----------------- -------------------------------
安装完成后，我们再将上面安装的插件配置到 .babelrc 文件中：
-
---------- -
--------------------- -
---------- -
----------- ------ - ---------- -- ----
-
--
--
---------- -
---------------------------------
-
-其中，@babel/preset-env 是一个能根据不同浏览器和环境自动配置 Babel plugins 的 preset， @babel/plugin-transform-runtime 能模拟一个常见的运行时环境，并使用此环境来防止重复编写代码和膨胀的包大小。
在 Vite 中配置 Babel
安装 Babel 和插件后，我们需要将它应用到我们的 Vite 项目中，而这可以通过在 vite.config.js 文件中添加一个 build 选项来完成，示例如下：
------ - ------------ - ---- -------
------ ------- --------------
------ -
------- ---------
------- -------
-------------- -
------ ---------------
------- -
------- -----
-
--
------ -
----------- ------------
-
-
--上面代码中，我们使用了 Vite 的 defineConfig 函数来定义了一个 vite.config.js 配置文件，其中包含了一个 build 选项，这个选项用于配置构建选项，其中 target 表示输出的代码目标环境， outDir 表示构建输出的路径，rollupOptions 将会被传递到 Rollup 的构建器中。
在 build 选项中，还包含了一个 babel 选项，它表示 Babel 的配置文件路径，我们需要将它指向 .babelrc 文件。
在 Vite 中使用 Babel
在上面完成配置后，我们就可以在我们的项目中添加 ES2015 代码了，然后让 Vite 执行编译和构建操作，由 Vite 调用 Babel 来将 ES2015 代码转换为 ES5 代码以支持更广泛的环境。
下面是一个使用新语法的例子：
----- --- - --- -- -- - - -- ------------------ ----
这段代码中我们使用了箭头函数，如果我们使用现代浏览器直接打开这个页面，是可以正常运行的，但是如果我们需要支持其他浏览器和环境时，我们可以使用 Babel 来将其转化为 ES5 代码，如下所示：
---- -------- --- --- - -------- ------ -- - ------ - - -- -- ------------------ ----
转化后的代码更加通用，可以支持更广泛的浏览器和环境。
使用 Babel，我们可以在我们的项目中更加自由地使用一些新的语法和特性，而不用担心它是否支持，同时也不会因为这些新的语法和特性而导致我们的代码出现错误或不兼容的情况。
结论
在 Vite 项目中使用 Babel 是非常简单的，只需要安装 Babel 和插件，然后在 vite.config.js 文件中添加一个 build 选项，并在其中配置 Babel 的 .babelrc 文件，最后在项目中使用 ES2015 代码就可以了，Vite 会自动对代码进行编译和转换以支持更广泛的浏览器和环境。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6720da082e7021665e04beb3