create-react-app 迁移到vite使用 pc和h5共存

背景

create-react-app 由于升级 使用webpack5 导致postcss配置不生效。想使用postcss-px-to-viewport-8-plugin 等一系列的h5适配插件解决方案都不生效。

最后决定迁移到vite使用

vite官网 为什么选 Vite | Vite 官方中文文档

vite 脚手架 创建项目 https://github.com/vitejs/vite/tree/main/packages/create-vite

我使用的是 react-ts 的模板  Vitejs - Vite (forked) - StackBlitz

vite.config.ts 配置如下

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from 'vite-plugin-compression';
import path from "path"
import svgr from "vite-plugin-svgr";
import autoprefixer from "autoprefixer"
import postcssPxToViewport from "postcss-px-to-viewport-8-plugin"
import requireTransform from 'vite-plugin-require-transform';
import legacy from '@vitejs/plugin-legacy'
import sassDts from 'vite-plugin-sass-dts'
// import vitePluginAliOss from 'vite-plugin-ali-oss'
// const options = {
//   region: '<Your Region>'
//   accessKeyId: '<Your Access Key ID>',
//   accessKeySecret: '<Your Access Key Secret>',
//   bucket: '<Your Bucket>'
// }
// const prod = process.env.NODE_ENV === 'production'
function resolve(name) {
  return path.join(__dirname,name)
}

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('./src')
    },
    extensions: ['.ts', '.tsx','.jsx','.js', '.json']
  },
  css: {
    postcss: {
      plugins: [
        autoprefixer(),
        postcssPxToViewport({
          unitToConvert: "px",
          viewportWidth: 750,
          unitPrecision: 3,
          propList: ["*"],
          viewportUnit: "vw",
          fontViewportUnit: "vw",
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: [/node_modules/,/^(?!.*h5)/],
          landscape: false,
        })
      ]
    }
  },

  // base: prod ? 'https://konnect.chat/' : '/', // must be URL when build

  plugins: [
    sassDts(),
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
    react(),
    viteCompression({
      deleteOriginFile: false
    }),
    svgr(),
    requireTransform({}),
    // vitePluginAliOss(options)
  ],
  build: {
    target: 'es2015',
    cssTarget: 'chrome80',
    minify: "terser", // 必须开启：使用terserOptions才有效果
    terserOptions: {
      compress: {
        keep_infinity: true,  // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
        drop_console: true,   // 生产环境去除 console
        drop_debugger: true   // 生产环境去除 debugger
      },
    },
    chunkSizeWarningLimit: 2000, // chunk 大小警告的限制（以 kbs 为单位）
    rollupOptions: {
      output: {// 分包
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
    
  }
})

postcssPxToViewport 插件生效规则为 当存在h5的文件目录的时候才会去转换 

做到pc和h5共存

简单模板 https://github.com/ChengYu08/vite-ts-init