手把手搭建TypeScript依赖库，从入门到进阶

2023-11-25 02:48:49

TypeScript作为JavaScript的超集，以其强大的类型系统和丰富的库支持，成为众多开发者的首选。而构建一个自己的TypeScript依赖库，可以帮助您复用代码、提高开发效率、构建更健壮的应用。本文将逐步引导您从零开始搭建一套自己的TypeScript模板库，涵盖pnpm/eslint/prettier/jest/rollup/husky等技术栈，帮助您快速上手TypeScript库的构建。

1. 前期准备

在开始构建TypeScript库之前，您需要确保已安装Node.js和TypeScript。您可以通过以下命令进行安装：

# 安装 Node.js
npm install -g nodejs

# 安装 TypeScript
npm install -g typescript

2. 项目初始化

创建一个新的TypeScript项目，您可以使用以下命令：

mkdir my-typescript-library
cd my-typescript-library
npm init -y

3. 安装依赖项

接下来，您需要安装必要的依赖项。您可以使用pnpm作为包管理器，它是比npm更快的替代品。

pnpm install --save-dev typescript @types/node

4. 配置项目

在项目根目录下创建tsconfig.json文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true
  }
}

5. 编写代码

在项目根目录下创建src目录，并在此目录下创建index.ts文件。在index.ts文件中，您可以编写您的TypeScript代码。

// index.ts
export function add(a: number, b: number): number {
  return a + b;
}

6. 单元测试

使用jest作为单元测试框架，在项目根目录下创建test目录，并在test目录下创建index.spec.ts文件。在index.spec.ts文件中，您可以编写您的单元测试代码。

// index.spec.ts
import { add } from "../src/index";

describe("add function", () => {
  it("should return the sum of two numbers", () => {
    expect(add(1, 2)).toBe(3);
  });
});

7. 构建项目

使用rollup作为构建工具，在项目根目录下创建rollup.config.js文件。在rollup.config.js文件中，您可以配置构建选项。

// rollup.config.js
import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "cjs"
  },
  plugins: [
    typescript()
  ]
};

8. 发布项目

使用npm作为发布平台，在项目根目录下创建package.json文件，并添加以下内容：

{
  "name": "my-typescript-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "rollup -c",
    "test": "jest"
  }
}