使用 Vite 打包我們的項目用 JS 和 CSS 代碼，可以讓我們通過模塊化方式來進行開發，還能享受到各種 npm 功能模塊帶來的好處。
情景再現
小恩在開發三個單頁（a.html，b.html，c.html），一開始，小恩為了方便，就給三個單頁，準備三個JS文件，a.js，b.js，c.js，分別在頁面中進行引入。
但是，他知道，每一個網絡請求都是很寶貴的，為了進一步提升網頁加載速度，他每次開發完代碼后，就將這三個JS文件手動復制黏貼在一個 main.js 文件中，然后給三個頁面導入。
但是業務需求一變再變，小恩在一次次復制黏貼中迷失自我， 而且，隨著這三個頁面用JS文件的代碼越來越多，每次開發時，小恩都要從256行跳轉到1262行，時不時還要通過搜索來查相關功能函數。
這樣太不方便了。
是時候用Vite來提升工作效率了！！！
準備環境
請通過以下教程安裝 Node ,掌握終端的基本操作，并配置cnpm
然后打開控制終端（Shit+鼠標右鍵，選擇shell），輸入以下命令，讓我們下載文件更快
npm install -g cnpm --registry=https://registry.npmmirror.com
下面我會繼續使用?npm?來示范，但我更推薦您使用?cnpm?,這樣能更快。
文件目錄
在桌面上創建如下結構的項目文件夾
?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
?//導入js文件
?import "./src/main.js";
?//導入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
你可以通過中終端中執行以下命令，快速創建?package.json?文件
?npm init -y
當然，您也可以直接使用我提供的文件
?{
? ?"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"
?}
??
添加了兩個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?表示入口文件路徑。
進行開發
您可以按照上述類似的代碼邏輯，撰寫自己的css和js文件，進行導入操作，然后運行以下命令對文件進行打包
?npm run build ? ?
打包后的結果如下：
?dist
? ? ├── index.css
? ? └── index.js
現在，您只需要將這兩個文件導入您的頁面中，即可看到相關效果。
當然，您還可以借助更多npm相關的工具進一步優化您的打包流程，如清理重復的css之類的。此處不再贅述。
預覽開發
若您想通過在當前項目的頁面上，開發css和js文件，快速驗證您的想法，您可以在項目目錄下新建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>頁面開發測試用首頁</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("不錯哦，加載了！");
??
現在，您可以在當前項目中運行以下命令
?npm run dev
根據提示打開網址，即可在第一時間查看您的代碼效果。
在開發完畢后，將打包后的文件載入頁面即可。
最后
現在，小恩開發項目就舒服多了，他根據不同的功能將代碼寫在不同的JS文件中，在線觀察效果，開發完畢后打包，代碼和注釋順便也壓縮了，在頁面中載入打包后的文件即可。
大大提升了工作效率，可以早點回家吃晚飯咯！
