使用vite构建现有webpack项目

将现有项目迁移到vite

最近准备重构一个老项目。原先这个项目是用webpack4打包的，为了尝尝鲜，准备在项目中加入vite构建的功能。

vite官网

1. 由于现有的是一个webpack项目，说以首先得加入vite的配置文件，为了方便，直接使用一个cli工具包- wp2vite 加入 Vite 的相关配置。

   // 安装 wp2vite 依赖(也可以在当前项目下安装)
   npm install -g wp2vite
   // 创建 vite.config.js 文件
   wp2vite init
   

2. 重新 npm install 依赖

3. 运行 npm run vite-dev

   

自动生成的 vite.config.js中 path 竟然没有引入？自己引入一下

const  path = require(path);

1. 重新 npm run vite-dev

   

   服务算是成功启动了，但是有一个 g2 的依赖找不到了。由于 g2 这个库比较大，所以当初是使用 cdn 的形式引入的。 盲猜是没有 externals 的配置。

   在官方找到一个类似 externals 的插件 vite-plugin-externals

   import { viteExternalsPlugin } from "vite-plugin-externals";
   ...
   viteExternalsPlugin({
           g2: "G2",
           dataSet: "DataSet",
           THREE: "THREE",
         }),
   

2. 一个奇怪的问题 删了 node_modules 重新安装就好了？？

   

3. Cannot read property 'EventDispatcher' of undefined

   

   查了一下 stackoverflow 需要将 OrbitControls 换成 orbit-controls-es6 包 参考链接

   import OrbitControls from 'orbit-controls-es6';
   
   const controls = new OrbitControls(camera, renderer.domElement);
   

4. 下面这个问题，是因为vite自己生成了模板文件，需要在vite生成的模板文件(index.html)中同样也引入cdn的包

   

   

5. 打开页面的时候发现loading不正常了

   

   

   对比了webpack构建的项目和 vite构建的项目发现，webpack中自动引入了打包后的main.safdssfdsfdsf34.css 而 vite中并没有打包，只有用的时候才会去加载css，所以导致缺失了一个样式

   // 在 index.html 中加上
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   

6. 换成vite之后热更新失效了？已经装了@vitejs/plugin-react-refresh 但是热更新仍然不起作用,每次修改文件都会重新刷新页面，具体是因为啥还在研究当中...