已成型的React项目中接入vite

需要改造的项目使用的技术为 react + webpack3 + typescript + antd-mobile 

以下改造方式只用于开发，打包依旧使用webpack

 

1.使用 wp2vite  插件 会将webpack配置信息自动生成 vite.config.js文件

 

// wp2vite
npm i wp2vite
wp2vite --config=./config/webpack.config.dev.js

　　

　　

 

2.使用vite-plugin-import 插件 使antd-mobile支持按需导入

// 安装 插件
npm i vite-plugin-import

　　

// 配置 vite.config.js文件

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import createImportPlugin from 'vite-plugin-import'
plugins: [
　　...
　　// 使用以下 插件 使antd-mobile可以按需引入
　　createImportPlugin({
　　　　onlyBuild: false,//是否只需要在生产环境中使用
　　　　babelImportPluginOptions: [
　　　　{
　　　　　 libraryName: 'antd-mobile',
           libraryDirectory: 'es',
           style: (name) => {
             return path.resolve(__dirname, `./node_modules/${name}/style/index.css`)
           }
         },
       ],
    }),
　　// 使用以下插件 将node_mudules文件排除编译范围
    viteCommonjs({
        exclude: [
          './node_modules/'
        ]
    }),
]

　　

　　

 

3.使用以下插件 设置process.env.xxx

在package.json中

tips： REACT_APP_ENV 属性

文件中访问变量地址为 process.env.REACT_APP_ENV

"scripts"{ 
    "start:vite": "cross-env HTTPS=false REACT_APP_ENV=/test vite"
}

　　

vite.config.js将此属性赋值

注意： `"${process.env.REACT_APP_ENV}"` 这里有个 " 符号 不要漏了

{
    ...
    define: {
        'process.env.REACT_APP_ENV': `"${process.env.REACT_APP_ENV}"`
    },
    plugins: [
        ...
    ]
}

　　

 

4.将public 中的index.html 移动到根目录 并且将webpack中配置的index.html入口文件路径 修改为最新的路径(我的项目目前是存放在path.js中)

5.编写自定义插件 读取根目录的html文件，并追加上入口文件，并将index.html 中的 PUBLIC_URL 替换

// vite.config.js文件中

const htmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html, url) {
      return html.replace(
        /<\/body>/,
        `<script type="module" src="/src/index.tsx"></script></body>`
      ).replaceAll('%PUBLIC_URL%', process.env.PUBLIC_URL || '')
    }
  }
}

// 在plugins中加入此插件
{
    ...
    define: {
        'process.env.REACT_APP_ENV': `"${process.env.REACT_APP_ENV}"`
    },
    plugins: [
        ...
　　　　htmlPlugin()
    ]
}

　　

　　

 

6.配置proxy.config.js文件 (如果有)

 

const PROXY_CONFIG = {
    "proxy": {
        '/test/user': {
            target: 'https://test.com:8074',
            secure: false,
　　　　　　　// 需要改为以下写法
            rewrite: path => {
                return path.replace(/^\/test/, '');
            },
　　　　　　　// 原有写法保留 供webpack dev使用
            pathRewrite: { '^/test': '' }
        }
    }
}
module.exports = PROXY_CONFIG;

 

 7.使用

首先安装最新插件

npm i 

　　

执行

npm run start:vite

　　

如果最终报错，需要查看一下你的nodejs版本，我项目使用的是v15.0.1版本，目前测试nodejs v11.xx.xx版本基本上都会报错。