vite-vanilla-ts-lib-starter 使用指南

vite-vanilla-ts-lib-starter 使用指南

vite-vanilla-ts-lib-starterThe starter is built on top of Vite 4.x and prepared for writing libraries in TypeScript. It generates a hybrid package - both support for CommonJS and ESM modules.项目地址:https://gitcode.com/gh_mirrors/vi/vite-vanilla-ts-lib-starter

项目目录结构及介绍

vite-vanilla-ts-lib-starter 是一个基于 Vite 的 TypeScript 库开发模板。以下是该模板的基本目录结构及其说明：

.
├── package.json        <!-- 项目配置文件，包含了依赖项、脚本命令等 -->
├── src                 <!-- 源码目录 -->
│   ├── index.ts        <!-- 主入口文件，通常存放库的主要接口或导出 -->
│   └── ...             <!-- 其他源代码文件 -->
├── dist                 <!-- 编译后的输出目录，包含ESM、IIFE等格式的库文件 -->
├── test                 <!-- 测试文件目录 -->
│   └── ...
├── .eslintrc.js       <!-- ESLint配置文件，用于代码风格检查 -->
├── .prettierrc.js      <!-- Prettier配置文件，自动格式化代码 -->
├── vite.config.ts      <!-- Vite构建配置文件 -->
├── tsconfig.json       <!-- TypeScript编译器配置文件 -->
└── README.md           <!-- 项目说明文档 -->

• package.json 包含了项目的元数据，如版本、作者、依赖、构建指令等。
• src 目录下存放的是开发期间的所有TypeScript源代码文件。
• dist 是自动化构建后生成的输出目录，包括用于各种环境的库文件。
• test 用来存放单元测试或集成测试文件。
• .eslintrc.js 和 .prettierrc.js 分别用于定义JavaScript/TypeScript的编码规范和美化规则。
• vite.config.ts 是Vite构建设置，定义了开发服务器、构建目标和其他构建相关配置。
• tsconfig.json 控制TypeScript编译过程中的行为。

项目的启动文件介绍

主要关注点在于 index.ts 文件，这是项目的主入口文件。在开发自己的库时，你将在这里定义和导出你的公共API。例如：

// src/index.ts
export function exampleFunction() {
    // 函数实现...
}

启动开发环境通常通过执行 npm run dev 或类似的脚本命令，这会在 vite.config.ts 中定义，并使用Vite启动一个本地服务器以便实时开发和调试。

项目的配置文件介绍

vite.config.ts

此文件配置了Vite的构建和开发设置，比如：

import { defineConfig } from 'vite';
import { createEsbuildPlugin } from 'vite-plugin-esbuild';

export default defineConfig({
    build: {
        target: 'esnext', // 指定构建的目标环境
        lib: {
            entry: './src/index.ts', // 指定库的入口文件
            formats: ['es', 'umd'], // 输出库的格式
        },
    },
    plugins: [createEsbuildPlugin()],
});

tsconfig.json

控制TypeScript编译的设置，如兼容性、输出目录等。示例配置可能包括：

{
    "compilerOptions": {
        "target": "es6",          // 指定ECMAScript版本
        "module": "esnext",      // 模块系统
        "outDir": "./dist",       // 编译输出目录
        "strict": true,           // 启用严格类型检查
        "esModuleInterop": true,   // 用于CommonJS和ES模块之间的互操作
    },
    "include": ["src/**/*"],     // 指定要编译的文件夹
}

这些配置文件共同确保了项目的代码质量和构建效率，使得开发TypeScript库的过程既简单又高效。通过遵循上述结构和配置，你可以轻松地开发、测试并发布你的TypeScript库。

vite-vanilla-ts-lib-starterThe starter is built on top of Vite 4.x and prepared for writing libraries in TypeScript. It generates a hybrid package - both support for CommonJS and ESM modules.项目地址:https://gitcode.com/gh_mirrors/vi/vite-vanilla-ts-lib-starter