迁移vite步骤及采坑记录

背景分析

本次的目的不是直接用 vite 替换 vue-cli ，而是想同时保留 vite 和 vue-cli 。除去影响开发体验
webpack 和 vite 本质上都是入口文件 + 依赖分析 + 模块转换。vite 是 使用的时候进行处理（vite针
对第三方库有同样会进行预处理）， webpack 则是先全部处理完毕。当浏览器天然支持 ES module 之
后，实时处理变得可能。这也是 vite 启动速度快的原因。

步骤

1. 分析vue.config.js，安装相关依赖

yarn add vite vite-plugin-vue2 -D # 这里只安装了必要的vite 与 vite vue2插件

package.json 中 添加scripts 命令

"scirpts": { ..., "dev": "vite" }

2.编写vite.config.js

const { createVuePlugin } = require('vite-plugin-vue2');
const { resolve } = require('path');
const { viteCommonJS } = require('@originjs/vite-plugin-CommonJS');
import { cjs2esmVitePlugin } from 'cjs2esmodule'
module.exports = {
    server: {
        host: '0.0.0.0',
        https: true,
        port: 4433,
        proxy: {
            '/xxx': {
                target: `https://200.200.116.44`,
                secure: false,
                changeOrigin: true
            }
        }
    },
    resolve: {
        alias: {
            '/@': resolve(__dirname, './src'),
            '/@src': resolve(__dirname, './src'),
            '/sf-vue-component': resolve(__dirname, 'node_modules/@sxf/sf-vue-component'),
            '/common': resolve(__dirname, './src/home/mod_common'),
            '/components': resolve(__dirname, './src/components'),
            '/util': resolve(__dirname, './src/util'),
            'vue': require.resolve('vue/dist/vue.esm.js')
        },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    build: { // 这里是build时才会用到，所以这里可以省略
        rollupOptions: {
            input: {
                login: resolve(__dirname, './login_deployment.html'),
                index: resolve(__dirname, './index_deployment.html')
            }
        }
    },
    plugins: [
    viteCommonJS({ include: ['procurios.resizesensor'] }),
        createVuePlugin({
            jsx: true,
            jsxOptions: {
                injectH: false,
            },
        }),
        cjs2esmVitePlugin()
    ]
};

3.多入口

在vite的开发环境中，多入口无需配置。启
动文件之后直接访问对应的html资源即可

wp2vite 能够将根据你当前的webpack配置生成vite配置（支持vue-cli），如果不想手写vite.config.js 可以
使用该工具进行自动转换（wp2vite 注意alias和proxy）

调整html入口文件

<script type="module" src="/src/main.js"></script>
<script type="module" src="/src/login.js"></script>

npm run dev

采坑1. alias

 配置alias以 / 开头，全局替换

2.Failed to resolve import “xxx”

补全vue结尾的文件

3.less,stylus报错，安装 less,less-loader, stylus,stylus-loader，不需要再别名前加~识别

访问资源408，重新刷新页面，是vite在对一些依赖进行预构建

4.require ,改成import

5.npm 包出错,修改别名，指向源码,修改别名，指向esm格式的打包文件

6.does not provide an export named ‘default’， 引入 @originjs/vite-plugin-CommonJS

7.jsx 在script声明 lang=“jsx”, createVuePlugin插件配置 jsx: true,

        jsxOptions: {
            injectH: false,
        },

8. Vue warn：runtime-only， 在vite.config.js中，添加一条别名即可解决， ‘vue’: require.resolve(‘vue/dist/vue.esm.js’)

COMMOMJS: nodejs 服务端规范，exports xx = ‘xxx’;
AMD: define([‘xxxx’])
CMD: define(function(require, exports) {
})

esm（import/export）: es6，编译时加载, 遇到模块加载命令import，就会生成一个只读引用。等脚本真正执行时，再根据这个只读引用，到被加载的那个模块内取值。

vite工作原理： 利用浏览器的ESM特性,当浏览器解析 .vue文件时，会向当前域名发送一个请求获取对应的资源，服务器启动一个 koa 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一定的处理最终以 ESM的格式返回给客户端，中间会有缓存

koa中间件 对js文件中的 import 语法进行路径的重写，改写后的路径会再次向服务器拦截请求

1. node_module文件，改写 路径，（@modules/:id 的写法。）
2. 静态资源请求
3. vue文件请求，分多个请求获取（script, template, css）

vite热更新： 客户端与服务端建立了一个 websocket 连接，当代码被修改时，服务端发送消息通知客户端去请求修改模块的代码，完成热更新