使用 vite 创建 JS 库

先上脚本

脚本已经放到 Gist，需要自取：https://gist.github.com/isaltyfish/b9cae38e67dd9a5e6c36e36c091e4d36

参考文档

• vite library mode
• Use Vite for JavaScript Libraries

创建步骤如下

以下假设我们要创建一个名为 hello JS 库，主要分为以下三个步骤：

1、初始化项目结构

npm init --yes
npm i vite --save-dev
mkdir lib && touch lib/hello.js vite.config.js

2、配置 vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    lib: {
      entry: "lib/hello.js",
      name: "hello",
      fileName: (format) => `hello.${format}.js`,
    },
    outDir: "dist",
  },
});

这个配置主要告诉 vite 入口点文件，这里入口点文件被指定为 lib/hello.js，另外配置了输出目录，这里指定为 dist。如果不配置 outDir，默认输出目录便是 dist，这里主要是想说明可以改变输出目录。

3、配置 package.json

可将以下内容复制到之前 npm init 生成的 package.json 中。

{
  "main": "dist/hello.umd.js",
  "module": "dist/hello.es.js",
  "exports": {
    ".": {
      "import": "./dist/hello.js",
      "require": "./dist/hello.umd.js"
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "test": "vitest",
    "dev": "vite",
    "build": "vite build"
  }
}

经过这样的配置之后，当我们在项目目录下执行 npm run build 命令，就可以在 dist 目录下生成 hello.umd.js 和 hello.es.js。