灏天阁

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

· Yin灏

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

本文不定时更新，最新地址如下：

- Book Lists -