vite相关总结

项目的vite配个别名设置，先要在vite.config.js 设置一下

如果你的项目是ts的，记得在tsconfig.json 里面设置下

使用如下：

vite已经集成了babel，如果你显性的使用babel那么这么做：

执行命令：

npm install --save-dev @babel/core @babel/preset-env @babel/cli @babel/helper-plugin-utils

在vite里面引入babel要用：
import babel from '@rollup/plugin-babel'

而不是：
import babel from "vite-plugin-babel";

@babel/helper-plugin-utils 是一个用于帮助开发者创建 Babel 插件的实用工具库。如果你想要在自己的项目中使用 Babel 进行代码转换，@babel/helper-plugin-utils 将会是一个非常有用的工具。

在vite里面使用@rollup/plugin-babel这个包以后，你就直接在vite.config.js里面配置babel就好了。这个babel不会去babel.config.js里面去找对应的配置文件，这个和webpack有点不一样，一定要注意下。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
import autoIntlPlugin from './plugin/babel-plugin-auto-translate';
import babel from '@rollup/plugin-babel'

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        react(),
        babel({
          babelHelpers: 'bundled',
          plugins: [autoIntlPlugin,]
        })
      ]
    }
  }
})

如何测试自定义babel插件有没有用？执行npm run build 项目会去打包，你在插件里面写个console.log看一下打包的时候能不能执行就好了。

建议在vite里面不要用babel插件，你可以选择vite插件，因为太难用了。