1. vite library库配置

1.1 创建一个空项目

npm init -y

// package.json
{
  "name": "vite-lib",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "vite": "^5.4.8"
  }
}

1.2. 安装vite

pnpm add -D vite

1.3. 参考构建生产版本 | Vite 官方中文文档 (vitejs.cn)创建 vite.config.js 文件

import { resolve } from "path";
import { defineConfig } from "vite";

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "minIM",
      fileName: "index",
    },
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    },
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});

1.4. 安装 typescript 并创建 tsconfig.json

pnpm add typescript -D

tsc --init

{
  "compilerOptions": {
    "outDir": "./dist",                 // 输出目录
    "target": "ESNext",                 // 编译的 JavaScript 版本
    "module": "ESNext",                 // 模块系统
    "strict": true,                     // 启用所有严格类型检查选项
    "esModuleInterop": true,            // 允许对CommonJS的默认导出进行esModule的interop操作
    "moduleResolution": "node",  
    "skipLibCheck": true,               // 跳过声明文件的类型检查
    "forceConsistentCasingInFileNames": true,  // 对文件名进行大小写检查
    "baseUrl": "./",                    // 基础路径
    "paths": {
      "@/*": ["src/*"]                  // 配置路径别名
    },
    "declaration": true,                // 生成声明文件
    "declarationDir": "./types",
    "sourceMap": true                   // 生成 source map 文件
  },
  "include": ["src/**/*"],              // 包含的文件
  "exclude": ["node_modules", "dist", "types"]   // 排除的文件或目录
}

1.5. 创建源文件 src/index.ts

// src/index.ts
/**
 * 冒泡排序
 * */  
 export function bubbleSort(arr: number[]): number[] {
    const n = arr.length;
    // 遍历数组
    for (let i = 0; i < n - 1; i++) {
      // 从0到n-i-1，因为最后的i个元素已经是排好序的了
      for (let j = 0; j < n - i - 1; j++) {
        // 如果当前元素比下一个元素大，则交换它们
        if (arr[j] > arr[j + 1]) {
          const temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    return arr;
  }


/**
 * 二分查找
 * */   
  function binarySearch(arr: number[], target: number): number {
    let left = 0;
    let right = arr.length - 1;
  
    while (left <= right) {
      const mid = Math.floor((left + right) / 2);
  
      if (arr[mid] === target) {
        // 找到目标值，返回索引
        return mid;
      } else if (arr[mid] < target) {
        // 目标值在中间元素的右侧，调整左边界
        left = mid + 1;
      } else {
        // 目标值在中间元素的左侧，调整右边界
        right = mid - 1;
      }
    }
  
    // 未找到目标值，返回-1
    return -1;
  }
  

  export default {
    bubbleSort,
    binarySearch
  }

• 实现两个方法并导出

1.6 修改package.json

{
  "name": "vite-lib",
  "type": "module",
  "version": "1.0.0",
  "files": [
    "dist",
    "types"
  ],
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./types/index.d.ts",
  "exports": {
    ".": {
      "types": "./types/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index..umd.cjs"
    }
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint:watch": "eslint . --watch",
    "lint": "eslint ./src",
    "format": "prettier --write .",
    "build": "tsc && vite build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.6.3",
    "vite": "^5.4.8"
  }
}

• 增加 "build": "tsc && vite build", 作为lib库生成脚本
• main,module,types,exports 指示导出文件位置

企业微信截图_17287188397972.png

• index.js 作为 ESM 模块 使用文件
• index.umd.cjs 作为 CommonJS 模块 使用
• index.d.ts 作为 typescript 类型文件

2. 新增eslint

2.1 根据命令添加eslint

npm init @eslint/config@latest

企业微信截图_17306917535805.png

• 根据自己的需要生成 eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

2.2. 调整 package.json

{
  "name": "vite-lib",
  "type": "module",
  "version": "1.0.0",
  "files": [
    "dist",
    "types"
  ],
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./types/index.d.ts",
  "exports": {
    ".": {
      "types": "./types/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index..umd.cjs"
    }
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint:watch": "eslint . --watch",
    "lint": "eslint ./src",
    "format": "prettier --write .",
    "build": "tsc && vite build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@eslint/js": "^9.14.0",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "globals": "^15.11.0",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.12.2",
    "vite": "^5.4.8"
  }
}

• "type": "module"
• 调整 main, module, types
• 新增编译脚本 "build": "vite build && npm run declarations"

此时可以使用 npm run build 得到打包后文件