Npcink Blog
切换菜单

使用 Vite 打包项目用的 JS 和 CSS 文件，改善开发体验 - Vite

最后更新于
本页目录11 节

使用 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），输入以下命令，让我们下载文件更快

Terminal window
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 文件

Terminal window
 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 文件，进行导入操作，然后运行以下命令对文件进行打包

Terminal window
 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("不错哦，加载了！");
 ​

现在，您可以在当前项目中运行以下命令

Terminal window
 npm run dev

根据提示打开网址，即可在第一时间查看您的代码效果。

在开发完毕后，将打包后的文件载入页面即可。

最后

现在，小恩开发项目就舒服多了，他根据不同的功能将代码写在不同的 JS 文件中，在线观察效果，开发完毕后打包，代码和注释顺便也压缩了，在页面中载入打包后的文件即可。 大大提升了工作效率，可以早点回家吃晚饭咯！