webpack项目 迁移到 vite

1. 处理依赖

yarn add vite vite-plugin-html @vitejs/plugin-vue -D
# 如果使用了jsx语法还需要
yarn add @vitejs/plugin-vue-jsx
# 如果需要生成d.ts文件
yarn add vite-plugin-dts -D
# 如果需要 analyzer
yarn add rollup-plugin-bundle-analyzer -D

删除 webpack 依赖，常见的有

{
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-eslint": "~5.0.0",
  "@vue/cli-plugin-router": "~5.0.0",
  "@vue/cli-plugin-typescript": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "@vue/eslint-config-typescript": "^9.1.0",
  "vue-cli-plugin-style-resources-loader": "^0.1.5",
  "webpack-cli": "^5.0.1"
}

2. 修改配置

// package.json
  "type": "module",
  "scripts": {
    "serve": "vite --host 0.0.0.0 --port 8080",
    "build": "vite build"
  },

<!-- index.html -->
<script type="module" src="/src/main.ts"></script>

• 添加或修改 tsconfig.json和tsconfig.node.json，两个文件参考 vite 项目

• .prettierrc.js等配置文件后缀名改为 cjs

• 删除vue.config.js，添加vite.config.ts

  // vite.config.ts
  import { resolve } from 'path';
  import { defineConfig } from 'vite';
  import { createHtmlPlugin } from 'vite-plugin-html';
  import vue from '@vitejs/plugin-vue';
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [
      vue(),
      createHtmlPlugin({
        inject: {
          // 可以向html中注入变量，原来的 htmlWebpackPlugin.options.. 不能再用
        },
      }),
      // bundleAnalyzer(),
      // dts()
    ],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
      // extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.cjs', '.vue']
    },
    css: {
      // css全局变量，如果需要的话
      preprocessorOptions: {
        scss: {
          sourceMap: true,
          additionalData: `@import './src/styles/variables.scss';`,
        },
      },
    },
  });
  

3. 代码变更

• process.env换为import.meta.env

• 处理html中插入的变量

• 静态资源引用@/assets/xx.png=>require('@/assets/xx.png')

• 添加vite-env.d.ts

  /// <reference types="vite/client" />
  
  declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
  }
  
  interface ImportMetaEnv {
    readonly VITE_APP_TITLE: string
    // 更多环境变量...
  }
  
  interface ImportMeta {
    readonly env: ImportMetaEnv
  }
  

其它根据错误提示修改，比如有 jsx 语法的 vue 文件，要在 script 标签上添加lang="jsx"

3.1 生成dts

vite-plugin-dts 与 jsx 一起使用时会报错

tsc命令也可以生成dts

3.2 webpackChunkName

import(/* webpackChunkName: "xxx" */ ...

可以使用vite-plugin-webpackchunkname来识别

3.3 workbox-webpack-plugin

使用插件vite-plugin-pwa代替

3.4 worker-loader

vite自带worker识别

3.5 CDN

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

借助vite-plugin-cdn-import或rollup-plugin-external-globals解决，详见
https://juejin.cn/post/7115215444671201310

https://juejin.cn/post/7197222701220053047、https://juejin.cn/post/7233220422241108023