vite構(gòu)建項(xiàng)目并支持微前端
得益于 esbuild 的超高性能，vite 在誕生之初就備受關(guān)注，且一直保持著活躍的開(kāi)發(fā)迭代。截至目前，vite 已經(jīng)迭代到了 2.7.10 版本，各方面也基本具備了在生產(chǎn)使用的條件。這段時(shí)間，我在項(xiàng)目中嘗試了使用 vite 進(jìn)行打包構(gòu)建，本文就是這次構(gòu)建的過(guò)程記錄。
基礎(chǔ)配置
首先使用vite 官方腳手架生成項(xiàng)目。
yarn create vite vite-demo --template react-ts
上面這行命令使用
react-ts模板創(chuàng)建了一個(gè)叫vite-demo的項(xiàng)目。由于我在的團(tuán)隊(duì)日常使用 react 和 typescript 開(kāi)發(fā)居多，因此選擇了react-ts這個(gè)模板，vite 官方支持的模板還有很多，可以在 create-vite 中查看。
項(xiàng)目初始化完成以后，目錄結(jié)構(gòu)如下：
. |____index.html |____.gitignore |____package.json |____tsconfig.json |____vite.config.ts |____src | |____App.tsx | |____main.tsx | |____App.css | |____index.css | |____vite-env.d.ts | |____logo.svg | |____favicon.svg
其中 vite.config.ts 內(nèi)容如下：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})
可以看出，vite 官方已經(jīng)做了比較完善的封裝，相較于之前版本，開(kāi)發(fā)體驗(yàn)提升了很多。
按照指示安裝完依賴(lài)，啟動(dòng)應(yīng)用以后，速度確實(shí)很快?，F(xiàn)在我們來(lái)做一些基本改造。
我通常使用 less 來(lái)寫(xiě)樣式，vite 已經(jīng)做了很好的支持，在安裝完依賴(lài)以后，只需要直接在代碼中引用 xxx.less 即可。對(duì)于一個(gè)久經(jīng)考驗(yàn)的開(kāi)發(fā)者來(lái)說(shuō)，樣式還是要引入作用域的，通常使用 css modules。
安裝 less 預(yù)處理器，
yarn add --dev less
然后修改 vite.config.ts 文件，添加 css modules 配置：
export default defineConfig({
...
css: {
modules: {
localsConvention: 'camelCaseOnly', // 我們使用駝峰形式
},
},
...
})
添加完配置以后，只要將原來(lái)的 xxx.less 改成 xxx.module.less 即可，這點(diǎn)與 create-react-app 是一樣的。
這里推薦一個(gè) vscode 插件 clinyong.vscode-css-modules 可以實(shí)現(xiàn)編碼時(shí)樣式類(lèi)名的智能提示，同時(shí)點(diǎn)擊樣式類(lèi)名可以跳轉(zhuǎn)到樣式定義的地方，非常好用。如果在編寫(xiě)樣式時(shí)使用的是中劃線形式的命名方式，比如 .xxx-container，那么需要額外配置這個(gè) vscode 插件，如下
{
"cssModules.camelCase": true
}
這樣可以實(shí)現(xiàn)編寫(xiě)樣式時(shí)使用中劃線形式，在代碼中使用的還是駝峰式的。
由于我開(kāi)發(fā)的是一個(gè)中后臺(tái)項(xiàng)目，使用了 antd 和 lodash，大家都知道，這兩個(gè)是按需加載大戶(hù)，以前我們使用 babel-plugin-import 來(lái)處理，vite 生態(tài)里也有很多類(lèi)似的方案。我選用了 vite-plugin-imp 這個(gè)插件，修改 vite.config.ts 如下：
import vitePluginImp from 'vite-plugin-imp';
export default defineConfig({
...
plugins: [
...
vitePluginImp({
libList: [
{
libName: 'lodash',
libDirectory: '',
camel2DashComponentName: false,
},
{
libName: 'antd',
style(name) {
// use less
return `antd/es/${name}/style/index.js`;
},
},
],
}),
],
css: {
...
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
});
antd 已經(jīng)默認(rèn)支持了 Tree Shaking，上面的配置最終只會(huì)處理樣式的按需加載。lodash 不支持 Tree Shaking，我們也可以使用 ESM 版本 lodash-es，這樣就可以不使用 vite-plugin-imp 了，配置如下：
export default defineConfig({
resolve: {
alias: [{
find: /^lodash$/,
replacement: 'lodash-es',
}],
},
});
通常，我們?cè)陂_(kāi)發(fā)前端項(xiàng)目時(shí)，需要一些代理來(lái)調(diào)用后端 API 接口，vite 配置如下：
export default defineConfig({
...
server: {
proxy: {
'/api_path/': {
target: 'http://xxx.server.domain.com/',
changeOrigin: true,
},
},
},
});
代理底層都是基于 http-proxy 實(shí)現(xiàn)，這里不做過(guò)多說(shuō)明了。
現(xiàn)在可以愉快的開(kāi)發(fā)代碼了。
支持微前端構(gòu)建
因?yàn)槲覀兊闹泻笈_(tái)應(yīng)用是使用微前端（qiankun）來(lái)管理的，上面的配置，打包完成后不能被 qiankun 識(shí)別，主要原因可以看看這里，我們需要做一些額外處理。
我們知道，使用 webpack 構(gòu)建微前端是，需要添加如下三個(gè)配置項(xiàng)：
{
output: {
libraryTarget: 'umd',
library: `${APP_NAME}-[name]`,
jsonpFunction: `webpackJsonp_${APP_NAME}`,
}
}
在 vite 中，可以直接通過(guò)設(shè)置 build.rollupOptions.format 為 umd 來(lái)設(shè)置 UMD 規(guī)范，但是實(shí)際構(gòu)建結(jié)果卻不能被 qiankun 識(shí)別，猜想是可能跟 vite 使用 html entry 有關(guān)系。
換一個(gè)思路，我們把當(dāng)前整個(gè)應(yīng)用當(dāng)做一個(gè) library 來(lái)構(gòu)建，輸出為 UMD 規(guī)范，然后手動(dòng)寫(xiě)入一個(gè) html 文件，加載這個(gè)輸出的 JS。
修改配置如下：
export default defineConfig({
...
build: {
lib: {
name,
entry: path.resolve(__dirname, 'src/index.tsx'),
formats: ['umd'],
},
},
...
})
配置完成之后，執(zhí)行 yarn build 提示如下錯(cuò)誤：
UMD and IIFE output formats are not supported for code-splitting builds.
因?yàn)槲覀兊膽?yīng)用中有路由，使用了按需加載。我們將 rollup 的 inlineDynamicImports 配置打開(kāi)：
export default defineConfig({
...
build: {
rollupOptions: {
output: {
inlineDynamicImports: true,
},
},
},
...
})
這樣，構(gòu)建完成之后，dist 目錄下有兩個(gè)文件 style.css 和 xxx.umd.js。
現(xiàn)在我們要生成 index.html 了。
因?yàn)?vite 在開(kāi)發(fā)態(tài)直接使用 ES Modules，是不打包的，因此生成開(kāi)發(fā)態(tài)的 index.html 和生產(chǎn)的 index.html 是不同的。
我們修改項(xiàng)目根目錄下的 index.html 為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<!-- style placeholder -->
</head>
<body>
<div id="root"></div>
<!-- script placeholder -->
</body>
</html>
注意當(dāng)中的兩行注釋?zhuān)覀儠?huì)在開(kāi)發(fā)態(tài)和生產(chǎn)構(gòu)建做不同的處理。
vite 插件 API 中有一個(gè) transformindexhtml 可以定制開(kāi)發(fā)態(tài)的 html 內(nèi)容，因此，我們開(kāi)發(fā)態(tài)的配置如下：
// https://vitejs.dev/config/
export default defineConfig({
...
plugins: [
...
{
name: 'dev html',
apply: 'serve',
transformIndexHtml(indexHtml: string) {
return indexHtml
.replace('<!-- style placeholder -->', '')
.replace('<!-- script placeholder -->', '<script type="module" src="/src/index.tsx"></script>');
},
},
...
],
});
生產(chǎn)構(gòu)建需要借助于 @rollup/plugin-html 這個(gè)插件來(lái)實(shí)現(xiàn)定制 html 內(nèi)容。
import html from '@rollup/plugin-html';
import fs from 'fs';
const entryHtml = fs.readFileSync('./index.html', { encoding: 'utf-8' });
export default defineConfig({
...
plugins: [
...
{
name: 'build html',
apply: 'build',
...html({
template: () => {
return entryHtml
.replace(
'<!-- style placeholder -->',
'<link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" />',
)
.replace(
'<!-- script placeholder -->',
`<script type="text/javascript" src="${name}.umd.js"></script>`,
);
},
}),
},
...
],
});
通過(guò)上面的配置，再次構(gòu)建，qiankun 可以加載這個(gè)子應(yīng)用了。
其他說(shuō)明
1. 老舊瀏覽器的支持
由于我這次的項(xiàng)目是中后臺(tái)項(xiàng)目，對(duì)老舊瀏覽器的支持訴求不強(qiáng)烈，就沒(méi)有在項(xiàng)目中做處理。其實(shí) vite 官方也是給了解決方案的，就是 @vitejs/plugin-legacy 這個(gè)插件。
原理也非常簡(jiǎn)單，就是通過(guò) <script nomodule> 來(lái)實(shí)現(xiàn)在不支持 ES Modules 的瀏覽器執(zhí)行相關(guān)腳本，同時(shí)使用 SystemJS 來(lái)加載模塊。
2. 關(guān)于 TypeScript 的說(shuō)明
腳手架初始化完成以后就可以用 TypeScript 開(kāi)發(fā)，這里格外說(shuō)明一點(diǎn)，就是需要開(kāi)啟編譯器選項(xiàng) isolatedModules:true，因?yàn)?vite 使用 esbuild 處理 ts 文件，只將 ts轉(zhuǎn)換成 js 而不做類(lèi)型檢查（依賴(lài)編輯器處理類(lèi)型檢查，比如 vscode）。因此，當(dāng)遇到一些純類(lèi)型的導(dǎo)入導(dǎo)出時(shí)，會(huì)出錯(cuò)，需要開(kāi)啟 isolatedModules:true 來(lái)避免這個(gè)問(wèn)題。如果因?yàn)橐恍┰驘o(wú)法開(kāi)啟這個(gè)選項(xiàng)，則可以使用 rollup-plugin-friendly-type-imports 這個(gè)包來(lái)處理，這個(gè)包的 README 里也說(shuō)明了為什么會(huì)有這樣的問(wèn)題。
3. 對(duì)接 CDN
基于上面的配置構(gòu)建出來(lái)的結(jié)果，瀏覽器在加載資源的時(shí)候，都是使用的根路徑（/）加載，如果使用 CDN 的話會(huì)出現(xiàn)資源加載 404 的問(wèn)題。
我們可以配置 base 來(lái)設(shè)置基礎(chǔ)路徑，類(lèi)似于 webpack 的 PUBLIC_PATH。
export default defineConfig({
base: '/some/public/path',
})
4. 構(gòu)建出錯(cuò)
4.1 找不到包
報(bào)錯(cuò)信息為：
[plugin: vite:dep-scan] Failed to resolve entry for package "xxx"
通常是依賴(lài)包未在 package.json 正確配置 main、module 等字段，導(dǎo)致 vite 無(wú)法找到包的入口。
可以設(shè)置通過(guò)設(shè)置別名的方式，將其映射到正確的文件上。
export default defineConfig({
resolve: {
alias: [{
find: /^SOME_PACKAGE_NAME$/,
replacement: 'SOME_PACKAGE_NAME/dist/xxx.es.js',
}],
},
});
4.2 請(qǐng)求超時(shí)
報(bào)錯(cuò)信息為：
net::ERR_ABORTED 408 (Request Timeout)
啟動(dòng)開(kāi)發(fā)服務(wù)器后，瀏覽器出現(xiàn)請(qǐng)求超時(shí)錯(cuò)誤。是因?yàn)?vite 檢測(cè)到對(duì)依賴(lài)包的請(qǐng)求，且該依賴(lài)尚未被 vite 處理過(guò)，這時(shí)候會(huì)會(huì)觸發(fā)預(yù)構(gòu)建，導(dǎo)致請(qǐng)求超時(shí)以及頁(yè)面重載。
我們可以多刷新幾次等 vite 完成預(yù)構(gòu)建，也可以將依賴(lài)加入 optimizeDeps.include 來(lái)提前處理。
4.3 導(dǎo)入模塊出錯(cuò)
報(bào)錯(cuò)信息為：
Internal server error: Failed to resolve import "./chunk-7L3SPMWF.js" from "node_modules/.vite/antd.js?v=7bec0e27". Does the file exist?
可能是因?yàn)橐恍┮蕾?lài)包輸出的格式 vite 還不支持，可以看看這個(gè) issue。
這個(gè)錯(cuò)誤只在開(kāi)發(fā)服務(wù)器運(yùn)行處理過(guò)程中存在，待頁(yè)面正常展示后就不出現(xiàn)了，忽略這個(gè)錯(cuò)誤之后，目前看也沒(méi)產(chǎn)生什么影響。
小結(jié)
總體來(lái)說(shuō)，vite 已經(jīng)基本具備了生產(chǎn)使用的條件。如果是常規(guī)的應(yīng)用開(kāi)發(fā)，vite 的配置非常簡(jiǎn)單，可以說(shuō)是開(kāi)箱即用。如果需要添加額外的配置也非常方便。
目前比較大的問(wèn)題是周邊生態(tài)還不是特別成熟，很多已經(jīng)成熟的包對(duì)于 vite（ES Modules）的支持比較弱。同時(shí)，如果團(tuán)隊(duì)內(nèi)基建氛圍比較濃厚的話，自己開(kāi)發(fā)的工具包也要考慮這方面的問(wèn)題。
到此這篇關(guān)于vite構(gòu)建項(xiàng)目并支持微前端的文章就介紹到這了,更多相關(guān)vite構(gòu)建項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue組件和iframe頁(yè)面的相互傳參問(wèn)題及解決
這篇文章主要介紹了vue組件和iframe頁(yè)面的相互傳參問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue 中使用print.js導(dǎo)出pdf操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
我們通常會(huì)用到腳手架vuecli創(chuàng)建項(xiàng)目,此時(shí)需要安裝腳手架,下面這篇文章主要給大家介紹了關(guān)于vue腳手架安裝以及安裝失敗問(wèn)題的解決辦法,需要的朋友可以參考下2022-07-07
vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法)
這篇文章主要介紹了vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue通過(guò)moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
vue項(xiàng)目中v-model父子組件通信的實(shí)現(xiàn)詳解
vue.js，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中v-model父子組件通信實(shí)現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12
這篇文章主要為大家介紹了vuex?Mutations同步Actions異步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-04-04
本文介紹了如何使用Vite快速搭建Vue項(xiàng)目,強(qiáng)調(diào)Vite對(duì)Node.js版本有最低要求（>=12.0.0）,提供了環(huán)境準(zhǔn)備、安裝步驟和啟動(dòng)指南,旨在幫助開(kāi)發(fā)者高效啟動(dòng)Vue項(xiàng)目2024-10-10
在使用?element?ui?組件過(guò)程中，我最近碰到了新的問(wèn)題，vue--elementui中如何修改el-input樣式呢，今天小編通過(guò)示例代碼給大家詳細(xì)講解，需要的朋友參考下吧2023-05-05