创建 npm 模块 typescript

如果你是一名 TypeScript 编程爱好者，你一定想有一个自己的 npm 模块，用来展示你的编程技能和想法。然而，构建一个 TypeScript npm 模块并不是一件容易的事情，特别是对于初学者来说。

在这个指南中，我们将向你展示如何创建一个 TypeScript npm 模块。我们将会探讨如何配置 TypeScript 和构建脚本以及如何发布你的模块到 npm。

配置 TypeScript

首先，让我们创建一个新的 npm 模块并安装 TypeScript。

$ mkdir my-typescript-module
$ cd my-typescript-module
$ npm init -y
$ npm i typescript --save-dev

接下来，我们需要创建 TypeScript 配置文件 tsconfig.json，我们可以使用 TypeScript 自带的工具来生成该文件：

$ npx tsc --init

此时，你会发现根目录下生成了一个 tsconfig.json 文件。

现在，我们可以显式地将 TypeScript 配置为输出 CommonJS 模块，可以通过 "module": "CommonJS" 选项完成。这也允许我们使用 Node.js 的 require 函数来加载模块。

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

构建脚本

为了将 TypeScript 代码转换为 JavaScript 并将其发布到 npm 上，我们需要一个构建脚本。我们将使用 npm 脚本来执行这个任务。

我们可以创建一个 build 脚本，在执行该脚本时，我们将使用 TypeScript 编译器编译 src 目录下的代码，并将其输出到 dist 目录。

{
  "scripts": {
    "build": "tsc"
  }
}

接下来在根目录下创建一个 src 目录，并在其中创建一个 TypeScript 文件 index.ts，用作我们的模块入口文件。

// index.ts
export const hello = (name:string) => `Hello ${name}!`;

编写测试

为了让我们的代码具有可靠性，我们需要写一些测试。我们将使用 Jest 测试框架。同样地，我们将使用 npm 脚本来执行这些测试。

$ npm i jest ts-jest @types/jest --save-dev

Jest 依赖于 CommonJS 模块，我们需要使用 ts-jest 转换模块为 CommonJS。 使用 Jest 需要创建一个 Jest 配置文件 jest.config.js ，具体为：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
}

接下来，我们将在 src 目录下创建一个测试文件 index.spec.ts

import { hello } from './index';

describe('hello', () => {
  it('should return "Hello World!"', () => {
    expect(hello('World')).toBe('Hello World!');
  });
});

然后，我们将在 package.json 中添加测试脚本：

{
  "scripts": {
    "build": "tsc",
    "test": "jest --watch"
  }
}

现在，我们可以执行 npm run test 来运行测试了！

$ npm run test

发布到 npm

当我们完成代码的编写和测试后，我们就可以发布我们的 npm 模块了。 发布模块需要大量的事项，如配置 npm 账户、打标签、更新版本号、发布等。不过，我们将讨论最常见的操作方式。

首先，在 npm 上注册一个账号并登录。

接下来，运行 npm login 来登录到 npm 账户:

$ npm login

然后，我们将通过命令自动更新 package.json 中的版本号，切换到 dist 目录并发布它。

{
  "scripts": {
    "build": "tsc",
    "test": "jest --watch",
    "publish": "npm version patch && npm run build && cd dist && npm publish"
  }
}

最后，运行以下命令发布你的模块。

$ npm run publish

恭喜，你已经成功地发布了你的第一个 TypeScript npm 模块！

总结

在本指南中，我们了解了如何创建 TypeScript 模块、如何配置 TypeScript 和 Jest ， 如何编写测试以及如何发布到 npm。

我希望，这篇文章对你有所帮助，可以让你更了解如何使用 TypeScript，编写一个成功的 npm 模块。