0.什么是vite？
vite是一种新型前端构建工具。
- 一个开发服务器，它基于原生ES模块提供丰富的内建功能
- 一套构建指令，它使用Rollup 打包你的代码，可输出用于生产环境的高度优化过的静态资源
1.什么是babel？
babel 是一个javasctipt 编译器，他是一个工具链，主要用于在当前浏览器和旧浏览器环境中，将ECMAScript 2015 代码转换为 向后兼容版本的代码。
它主要做：
- 转换语法
- Polyfill 目标环境缺少的功能
- 源代码转换
- 等
2.babel插件说明
通过配置文件中应用插件，可以启用Babel 的代码转换
3.如何使用 babel-plugin-import？
3.1 安装 vite-plugin-babel、babel-plugin-import、@babel/preset-react
npm install @babel/preset-react vite-plugin-babel babel-plugin-import
3.2 在vite.config.js 中添加 vite-plugin-babel 插件
import babel from 'vite-plugin-babel';
export default defineConfig({
// 省略上方配置...
plugins: [
babel(),
// 省略下方配置...
]
});
3.3 在项目根目录新增Babel的配置文件 babel.config.cjs
module.exports = {
presets: [
[
"@babel/preset-react",
{
runtime: "automatic",
},
],
],
plugins: [
[
"import",
{
libraryName: "@arco-design/mobile-react",
libraryDirectory: "esm",
style: (path) => `${path}/style`,
},
],
],
};