Vite 非模块化文件打包

VPS 剩余价值计算器是一个普通的 HTML + CSS + 非模块化函数式 JS 项目，使用 Vite 作为构建工具来打包 JS 和 CSS 文件，把 JS 和 CSS 代码内联形式到 HTML 文件，既通过 Vite 打包压缩减少页面大小，又满足打包后，多文件项目变为无依赖的单文件，方便各种环境部署的需求。

简化版本目录结构如下：

app/
├── static/
│   ├── css/
│   │   ├── 1.css
│   │   ├── 2.css
│   │   ├── 3.css
│   │   └── main.css
│   └── js/
│       ├── 1.js
│       ├── 2.js
│       └── 3.js
└── index.html

其中各文件内容

index.html

<html>
<head>
  <link rel="stylesheet" href="static/css/main.css">
</head>

<body>
  <div id="app"><h1>vite packaging</h1></div>
  <script src="static/js/1.js"></script>
  <script src="static/js/2.js"></script>
  <script src="static/js/3.js"></script>
</body>
</html>

main.css

@import './1.css';
@import './2.css';
@import './3.css';
body {
  text-align: center;
}

1.js

// 1.js
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World"));

以上 index.html，引入 main.css 和 3个非模块化、函数式 js 文件，main.css 里面 import 了 3 个 css 文件。

# node 环境自行提前准备
# 初始化 vite 项目（无交互）
npm create vite@latest vite-app -- --template vanilla
cp vite-app/package.json .
npm install vite --save-dev
cat > vite.config.js <<'EOF'
import { defineConfig } from 'vite';
export default defineConfig({
    build: {
        emptyOutDir: false,  // 保留构建产物 <---- 执行多次 `npx vite build` 目标存在
        rollupOptions: {
        input: [
            './static/js/1.js',
        ],
        output: {
            //inlineDynamicImports: false,
            dir: 'build',    // 输出目录
            format: 'iife',  // JS 文件格式  <---- 重点，指定为函数式 JS 文件
            entryFileNames: '1.js'
        }
        }
    }
});
EOF
# 安装依赖
npm install
# 构建文件
npx vite build --config vite.js.config.js

以上打包出 build/1.js 文件，如果打包多个文件，编写多个配置文件，指定配置文件执行多次 npx vite build 命令即可。

最终结果：

文件从压缩减少了 10 kb，最重要的是，整个项目的多个 css 和 js 代码内联到 index.html 为独立无依赖单文件。

vite v6.3.2 building for production...
✓ 1 modules transformed.
build/jsq.js  8.76 kB │ gzip: 2.70 kB
✓ built in 123ms
vite v6.3.2 building for production...
✓ 1 modules transformed.
build/main.css  36.52 kB │ gzip: 7.85 kB