本次的目的不是直接用 vite 替换 vue-cli ,而是想同时保留 vite 和 vue-cli 。除去影响开发体验
webpack 和 vite 本质上都是入口文件 + 依赖分析 + 模块转换。vite 是 使用的时候进行处理(vite针
对第三方库有同样会进行预处理), webpack 则是先全部处理完毕。当浏览器天然支持 ES module 之
后,实时处理变得可能。这也是 vite 启动速度快的原因。
"scirpts": { ..., "dev": "vite" }
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()
]
};
在vite的开发环境中,多入口无需配置。启
动文件之后直接访问对应的html资源即可
wp2vite 能够将根据你当前的webpack配置生成vite配置(支持vue-cli),如果不想手写vite.config.js 可以
使用该工具进行自动转换(wp2vite 注意alias和proxy)
<script type="module" src="/src/main.js"></script>
<script type="module" src="/src/login.js"></script>
配置alias以 / 开头,全局替换
补全vue结尾的文件
jsxOptions: {
injectH: false,
},
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 语法进行路径的重写,改写后的路径会再次向服务器拦截请求
vite热更新: 客户端与服务端建立了一个 websocket 连接,当代码被修改时,服务端发送消息通知客户端去请求修改模块的代码,完成热更新