已成型的React项目中接入vite

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

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

 

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

 

?

1 2 3

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

　　

　　

 

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

?

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

　　

// 配置 vite.config.js文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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

?

1 2 3

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

　　

vite.config.js将此属性赋值

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

?

1 2 3 4 5 6 7 8 9

{     ...     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文件中

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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.使用

首先安装最新插件

?

1

npm i

　　

执行

?

1	npm run start:vite

　　

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