用 vite 2 平滑升级 vue 2 + webpack 项目实战

-> handleMessage() // packages/vite/src/client/client.ts
  ``````
     if (update.type === 'js-update') {
          queueUpdate(fetchUpdate(update))
        } else {
  ``````
-> fetchUpdate() 
  ``````
  // 利用了浏览器的动态引入 https://github.com/tc39/proposal-dynamic-import
  // 可见请求如 http://.../src/app.vue?import&t=1646797458716&vue&type=template&lang.js
    const newMod = await import(
      /* @vite-ignore */
      base +
        path.slice(1) +
        `?import&t=${timestamp}${query ? `&${query}` : ''}`
    )
  ``````

// build/config.js
module.exports = {
    title: '报表',
    // 打包文件夹名称
    base: 'my-report',
    // 调试配置
    debug: {
        pubDir: 'dist',
        assetsDir: 'assets',
        host: 'localhost',
        port: 8080,
        navCss: '/src/assets/common2.0/scss/nav-common.css',
        navJs: '/src/assets/common2.0/js/nav-common.js',
        proxy: {
            target: 'http://api.foo.com'
        }
    },
    // 生产配置
    prod: {
        navJs: '/public/v3/js/nav-common.js',
        navCss: '/public/v3/css/nav-common.css',
    }
};

import {createVuePlugin} from 'vite-plugin-vue2';
export default ({mode}) => {
    const isProduction = mode === 'production';
    return defineConfig({
        base: `/${config.base}/`,
    logLevel: 'info',
    // 插件，兼容 rollup
        plugins: [
      // vue2 和 jsx
        createVuePlugin({
            jsx: true,
            jsxOptions: {
                compositionAPI: true
            }
        }),
      // 打包统计
          timeReporter()
        ],
    // devServer 设置
    server: {},
    // 依赖解析规则等
    resolve: {
      alias: {}
    },
    // 打包目录、素材目录、rollup原生选项等
    build: {}
    });
};

resolve: {
    extensions: ['.ts', '.tsx', '.vue', '.js', '.jsx', '.json', '.css', '.scss'],
    alias: {
        '@': path.resolve(__dirname, '../src'),
        assets: path.resolve(__dirname, '../src/assets'),
        vue$: path.resolve(__dirname, '../node_modules', 'vue/dist/vue.esm.js')
    },
    symlinks: false
},

resolve: {
    extensions: ['.ts', '.tsx', '.vue', '.js', '.jsx', '.json', '.css', '.scss'],
    alias: [
        {
            find: '@',
            replacement: path.resolve(__dirname, 'src')
        },
        {
            find: 'assets',
            replacement: path.resolve(__dirname, 'src', 'assets')
        },
        {
            find: 'vue$',
            replacement: path.resolve(__dirname, 'node_modules', 'vue/dist/vue.esm.js')
        },
        {
            find: '~@foo/src/styles/common/publicVar',
            replacement: 'node_modules/@foo/src/styles/common/_publicVar.scss'
        },
        {
            find: '~@foo/src/styles/mixins/all',
            replacement: 'node_modules/@foo/src/styles/mixins/_all.scss'
        }
    ]
},

context: path.resolve(__dirname, '../'),
mode: isProduction ? 'production' : 'development',
entry: {
    index: './src/index.js'
},
output: {
    path: path.resolve(__dirname, '../dist', config.base),
    publicPath,
    filename: isProduction ? 'assets/js/[name].[contenthash:8].js' : 'assets/js/[name].[hash:8].js',
    chunkFilename: isProduction
        ? 'assets/js/[name].[contenthash:8].chunk.js'
        : 'assets/js/[name].[hash:8].chunk.js'
},
performance: {
    maxEntrypointSize: 2000000,
    maxAssetSize: 1000000
}

build: {
    outDir: `${pubDir}/${config.base}`,
    assetsDir,
    rollupOptions: {
    },
    chunkSizeWarningLimit: 1000000,
    cssCodeSplit: true
}

import copy from 'rollup-plugin-copy';
...
// 打包时才拷贝
plugins: [
  isProduction
    ? copy({
          targets: [
              {
                  src: path.resolve(__dirname, 'src/assets/imgs'),
                  dest: `${pubDir}/${config.base}/${assetsDir}`
              }
          ],
          hook: 'writeBundle'
      })
    : void 0,
],
// 调试过程中特殊转写
server: {
    proxy: {
        '/my-report/assets/imgs/': {
            target: `http://${host}:${port}/`,
            rewrite: path => path.replace('assets', 'src/assets')
        }
    },
}

import {createHtmlPlugin} from 'vite-plugin-html';
...
const indexReplaceHolder = '//fakePrefix';
...
plugins: [
    createHtmlPlugin({
        template: 'index.html',
        minify: true,
        inject: {
            data: {
                htmlWebpackPlugin: {
                    options: {
                        title: config.title,
                        navCss: isProduction ? indexReplaceHolder + config.prod.navCss : config.debug.navCss,
                        navJs: isProduction ? indexReplaceHolder + config.prod.navJs : config.debug.navJs
                    }
                }
            }
        }
    }),
    (function() {
        let viteConfig;
        return {
            name: 'vite-plugin-fix-index',
            configResolved(resolvedConfig) {
                viteConfig = resolvedConfig;
            },
            transformIndexHtml(code) {
                if (viteConfig.command === 'build' && isProduction) {
                    const re = new RegExp(indexReplaceHolder, 'g');
                    code = code.replace(re, '');
                }
                return code;
            }
        };
    })(),
],

// __tests__/setup.js 
jest.mock('../src/utils/env.js', () => {
    return {
        getEnvMode: () => 'production'
    };
});