使用 Vite 打包我們的項(xiàng)目用 JS 和 CSS 代碼，可以讓我們通過模塊化方式來進(jìn)行開發(fā)，還能享受到各種 npm 功能模塊帶來的好處。
情景再現(xiàn)
小恩在開發(fā)三個(gè)單頁（a.html，b.html，c.html），一開始，小恩為了方便，就給三個(gè)單頁，準(zhǔn)備三個(gè)JS文件，a.js，b.js，c.js，分別在頁面中進(jìn)行引入。
但是，他知道，每一個(gè)網(wǎng)絡(luò)請求都是很寶貴的，為了進(jìn)一步提升網(wǎng)頁加載速度，他每次開發(fā)完代碼后，就將這三個(gè)JS文件手動復(fù)制黏貼在一個(gè) main.js 文件中，然后給三個(gè)頁面導(dǎo)入。
但是業(yè)務(wù)需求一變再變，小恩在一次次復(fù)制黏貼中迷失自我， 而且，隨著這三個(gè)頁面用JS文件的代碼越來越多，每次開發(fā)時(shí)，小恩都要從256行跳轉(zhuǎn)到1262行，時(shí)不時(shí)還要通過搜索來查相關(guān)功能函數(shù)。
這樣太不方便了。
是時(shí)候用Vite來提升工作效率了！！！
準(zhǔn)備環(huán)境
請通過以下教程安裝 Node ,掌握終端的基本操作，并配置cnpm
然后打開控制終端（Shit+鼠標(biāo)右鍵，選擇shell），輸入以下命令，讓我們下載文件更快
npm install -g cnpm --registry=https://registry.npmmirror.com
下面我會繼續(xù)使用?npm?來示范，但我更推薦您使用?cnpm?,這樣能更快。
文件目錄
在桌面上創(chuàng)建如下結(jié)構(gòu)的項(xiàng)目文件夾
?project
?├── index.js
?├── package.json
?├── src
?│ ? ├── css
?│ ? │ ? ├── a.css
?│ ? │ ? └── b.css
?│ ? ├── js
?│ ? │ ? ├── a.js
?│ ? │ ? └── b.js
?│ ? ├── main.js
?│ ? └── style.css
?└── vite.config.js
其中代碼的文件如下“
Index.js
?//index.js
?//導(dǎo)入js文件
?import "./src/main.js";
?//導(dǎo)入css文件
?import "./src/style.css";
??
main.js
?//main.js
?import "./js/a.js";
?import "./js/b.js";
?alert("不錯哦，加載了！");
??
style.css
?/*style.css*/
?@import './css/a.css';
?@import './css/b.css';
?body{
? ? ?background-color: red;
?}
??
package.json
你可以通過中終端中執(zhí)行以下命令，快速創(chuàng)建?package.json?文件
?npm init -y
當(dāng)然，您也可以直接使用我提供的文件
?{
? ?"name": "project",
? ?"version": "1.0.0",
? ?"description": "",
? ?"main": "index.js",
? ?"scripts": {
? ? ?"dev": "vite",
? ? ?"build": "vite build",
? ? ?"test": "echo "Error: no test specified" && exit 1"
? },
? ?"keywords": [],
? ?"author": "",
? ?"license": "ISC"
?}
??
添加了兩個(gè)npm快捷命令
vite.config.js
?//vite.config.js
?const path = require("path");
??
?module.exports = {
? ?plugins: [],
? ?build: {
? ? ?rollupOptions: {
? ? ? ?input: path.resolve(__dirname, "./index.js"),
? ? ? ?output: {
? ? ? ? ?entryFileNames: "index.js",// 打包的文件名
? ? ? ? ?chunkFileNames: "[name].js",// 代碼分割后的文件名
? ? ? ? ?assetFileNames: "[name][extname]",// 資源文件的文件名
? ? ? },
? ? },
? },
?};
??
rollupOptions.input?表示入口文件路徑。
進(jìn)行開發(fā)
您可以按照上述類似的代碼邏輯，撰寫自己的css和js文件，進(jìn)行導(dǎo)入操作，然后運(yùn)行以下命令對文件進(jìn)行打包
?npm run build ? ?
打包后的結(jié)果如下：
?dist
? ? ├── index.css
? ? └── index.js
現(xiàn)在，您只需要將這兩個(gè)文件導(dǎo)入您的頁面中，即可看到相關(guān)效果。
當(dāng)然，您還可以借助更多npm相關(guān)的工具進(jìn)一步優(yōu)化您的打包流程，如清理重復(fù)的css之類的。此處不再贅述。
預(yù)覽開發(fā)
若您想通過在當(dāng)前項(xiàng)目的頁面上，開發(fā)css和js文件，快速驗(yàn)證您的想法，您可以在項(xiàng)目目錄下新建index.html文件，寫入以下代碼
?<!DOCTYPE html>
?<html lang="en">
??
?<head>
? ? ?<meta charset="UTF-8">
? ? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? ?<title>頁面開發(fā)測試用首頁</title>
?</head>
??
??
?<body>
??
? ? ?<script type="module" src="/src/main.js"></script>
??
? ? 開始撰寫我的頁面代碼
? ? ?<div class="list">
? ? ? ? 5555
? ? ?</div>
?</body>
??
?</html>
我們還需要修改main.js文件，引入我們的css文件。
?//main.js
?import "./js/a.js";
?import "./js/b.js";
?import "./style.css";
?alert("不錯哦，加載了！");
??
現(xiàn)在，您可以在當(dāng)前項(xiàng)目中運(yùn)行以下命令
?npm run dev
根據(jù)提示打開網(wǎng)址，即可在第一時(shí)間查看您的代碼效果。
在開發(fā)完畢后，將打包后的文件載入頁面即可。
最后
現(xiàn)在，小恩開發(fā)項(xiàng)目就舒服多了，他根據(jù)不同的功能將代碼寫在不同的JS文件中，在線觀察效果，開發(fā)完畢后打包，代碼和注釋順便也壓縮了，在頁面中載入打包后的文件即可。
大大提升了工作效率，可以早點(diǎn)回家吃晚飯咯！