vite + react + arco-design-mobile 使用 babel-plugin-import 实现按需加载

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`,
      },
    ],
  ],
};

4.搞定

参考文档

Babel官网文档： https://babel.docschina.org/docs/en/plugins/
Arco.Design 官方文档： https://arco.design/mobile/react/arco-design/pc/#/
vite-plugin-babel npmjs页面： https://www.npmjs.com/package/vite-plugin-babel