vite + vue 项目使用 babel

使用 pnpm create vite 命令创建 vite + vue 项目。

Vite 团队默认没有开启可配置 babel，因为他们想让体验尽可能快。

而且 esbuild 已经能做许多事情（以前你可能想用 babel 完成）。

使用 vite-plugin-babel 插件

https://github.com/owlsdepartment/vite-plugin-babel

注意

在用 vite 创建 vue 项目时，模板不要选择 ts。否则亲测这个插件将会失效。

pnpm install -D vite-plugin-babel

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import babel from "vite-plugin-babel";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    babel(), 
    vue()
  ],
    optimizeDeps: {
      force: true // 设置为 true 可以强制依赖预构建，而忽略之前已经缓存过的、已经优化过的依赖。
    },
  server: {
    port: 5177
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

babel.config.js

const devDebug = require("./devDebug.js");

module.exports = {
    plugins: [
      ['enhance-log', 
        /** @type {import('babel-plugin-enhance-log').Options} */
        {  
          preTip: '🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀', // default 
          splitBy: '\n', // default
          endLine: false
        }
      ],
      devDebug
    ],
};