使用 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文件中，在线观察效果，开发完毕后打包，代码和注释顺便也压缩了，在页面中载入打包后的文件即可。
大大提升了工作效率，可以早点回家吃晚饭咯！
