UMD（Universal Module Definition）模块格式允许JavaScript代码在不同的环境和模块系统中使用。本文将教学：使用Vite构建工具将一个名为demo的模块打包成UMD格式，并通过版本号命名文件夹，最后将其部署到CDN，以便在HTML页面中直接引用。

创建一个新项目(文件夹)，进入到项目文件夹中初始化并安装依赖：

npm init -y
npm install vite rollup-plugin-terser --save-dev

在项目根目录下创建以下文件和文件夹

project/
 ├── src/
 │   └── demo.js
 ├── package.json
 └── vite.config.js

src/demo.js

也就是你最后要封装和部署的JS文件，这里随便写点。

export function sayHello() {
  console.log('Hello from Demo module!');
}

vite.config.js

需要自建，Vite配置文件。

import { defineConfig, loadEnv } from 'vite';
import fs from 'fs';
import path from 'path';

const packageJson = fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf8');
const packageObj = JSON.parse(packageJson);
const version = packageObj.version;

export default defineConfig({
    build: {
        outDir: `npm/v${version}`,
        lib: {
            entry: 'src/demo.js',
            name: 'Demo',
            fileName: (format) => `demo.js`,
            formats: ['umd'],
        },
        minify: 'terser',
        sourcemap: false,
    }
});

package.json

项目初始化时已经自动生成，只需修改一下scripts部分。

{
  "name": "demo",
  "version": "0.1.0",
  "main": "index.js",
  "scripts": {
    "build": "vite build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "rollup-plugin-terser": "^7.0.2",
    "vite": "^5.4.8"
  }
}

运行打包命令

用NPM打包

npm run build

或使用PNPM

pnpm build

运行后，会根据package.json定义的版本号，加上vite.config.js定义的outDir输出目录，在上方全部示例中，最后会将打包结果输出到npm/v0.1.0/文件夹下。

这时将打包成品上传到github仓库，最后借用jsDelivr的链接来进行引入即可。

借用jsDelivr在HTML中引入在线JS库的示例

假如你push到仓库后的地址是: https://github.com/4444TENSEI/AlistUploaderJS

也就是说

Github用户名	4444TENSEI
仓库名称	AlistUploaderJS
JS打包成品位于仓库中的目录位置	npm/v0.1.0/alist-uploader.js

那么，已经可以直接在浏览器通过下方链接去访问CDN上的JS文件了: https://testingcf.jsdelivr.net/gh/4444TENSEI/AlistUploaderJS/npm/v0.1.0/alist-uploader.js

在HTML中这么引入即可

<script src="https://testingcf.jsdelivr.net/gh/4444TENSEI/AlistUploaderJS/npm/v0.1.0/alist-uploader.js"></script>