webpack 转 vite 你可能遇到的问题

如何 js 文件编写使用 jsx

1. js 文件没法写 jsx - 使用 esbuild.transform 使用 jsx loader 解析，官方不推荐，性能不太好

{
     plugins: [
        {
          name: 'load-js-files-as-jsx',
          async load(id) {
            if (!id.match(/src\/.*\.js$/)) {
              return;
            }
            const file = await fs.readFile(id, 'utf-8');
            return esbuild.transformSync(file, { loader: 'jsx' });
          }
        },
    ],
    optimizeDeps: {
        esbuildOptions: {
              loader: {
                '.js': 'jsx',
              },
         }
    }
}

2. 某些第三方包会在编译 esm 文件时会不正确识别 flow 类型 - 同样的也是使用插件删除对应代码

  optimizeDeps: {
    include: ['react', 'react-dom'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
      plugins: [
        {
          name: 'esbuild-plugin-react-virtualized',
          setup({ onLoad }) {
            const filter = /@alipay[/\\]tech-ui[/\\]node_modules[/\\]react-virtualized[/\\]dist[/\\]es[/\\]WindowScroller[/\\]WindowScroller\.js$/;
            onLoad({ filter }, async (options) => {
              const code = await fs.readFile(options?.path, 'utf8');
              const broken = 'import { registerScrollListener, unregisterScrollListener } from \'./utils/onScroll\';';
              return { contents: code.replace(broken, '') };
            });
          }
        }
      ]
    }
  },

3. 环境变量获取不到 - 使用 define 注入变量或者使用 .env 或者 .env.production 文件

 define: {
    'import.meta.env.VITE_CDN_HOST': JSON.stringify(CDN_HOST),
    'import.meta.env.VITE_BUILD_GIT_GROUP': JSON.stringify(BUILD_GIT_GROUP),
    'import.meta.env.VITE_BUILD_GIT_PROJECT': JSON.stringify(BUILD_GIT_PROJECT),
    'import.meta.env.VITE_CDN_VERSION': JSON.stringify(CDN_VERSION),
    'process.env': {
    },
    process: undefined, // 或者根据需要定义一个基本的process对象
  },

4. monaco 代码编辑器使用

5. 构建路径问题 - 注入变量后使用环境区分

const isCDN = import.meta.env.VITE_USE_CDN === 'true';
const CDN_PATH = isCDN
  ? `https://${import.meta.env.VITE_CDN_HOST}/${import.meta.env.VITE_BUILD_GIT_GROUP}/${import.meta.env.VITE_BUILD_GIT_PROJECT}/${import.meta.env.VITE_CDN_VERSION}/min/vs`
  : '/min/vs'; // 否则使用本地路径

loader.config({
  paths: {
    vs: CDN_PATH
  }
});

6. 分包预加载资源依赖关系不正确，导致方法找不到 - 尽量不要用 ID 分包，使用对象形式就行

build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        entryFileNames: 'main.js',
        chunkFileNames: '[name].js',
        assetFileNames: '[name].[ext]',
        manualChunks: {
          react: ['react', 'react-dom'],
          'react-router-dom': ['react-router-dom'],
          monaco: ['@monaco-editor/react'],
          antd: ['antd'],
          xlsx: ['xlsx'],
          lodash: ['lodash-es'],
        },
      },
    },
    cssCodeSplit: false,
  },