30秒发布TypeScript包到NPM的配置指南

TypeScript包发布NPM配置指南

本文内容基于The 30 second guide to publishing a typescript package to npm进行编译与调整。

阅读前建议具备JavaScript、TypeScript及NPM的基础知识，若有发布常规NPM包的经验更佳。若无相关经验，网上也有许多简易教程可供参考。

发布NPM包时，初始化项目可直接使用npm init -y命令。若需使用TypeScript，执行tsc --init即可生成必要的配置文件。这两个命令分别生成package.json和tsconfig.json文件，随后需按以下步骤调整配置。

1. 在tsconfig.json中添加"declaration": true

该配置指示TypeScript编译器在编译过程中自动生成.d.ts类型声明文件。需注意，若使用了私有类型且该类型属于外部API的一部分，使用者将无法获得类型推断，编译器也会发出警告。此时只需在类型定义前添加export关键字即可解决。

2. 在package.json中添加"types": "index.d.ts"

此配置告知TypeScript编译器在导入包时查找类型定义文件的位置。由于.d.ts文件与main入口通常指向同一目录，因此package.json中通常包含如下两行配置。

"main": "dist/index.js",
"types": "dist/index.d.ts"

（此处假设tsconfig.json中的outDir已配置为dist目录）

3. 确保dist目录已加入.gitignore

在代码仓库中，通常只需保留源码而无需包含编译后的代码，因此不对dist目录进行版本控制。这并不影响将dist目录发布至NPM。

4. 执行构建命令

运行tsc即可编译所有源码。为简化操作，通常可在package.json中添加一条构建命令。

"build": "tsc"

5. 执行npm publish

接下来是将包发布到NPM。可在package.json中添加如下命令以简化发布流程。

"release": "tsc && npm publish"

笔者习惯使用standard-version配合commitizen来发布NPM包，有兴趣的读者可自行查阅相关资料。

若需在发布前调试本地包，可使用npm link命令。在项目根目录执行npm link后，在待调试的demo项目中执行npm link <your package name>，即可在代码中直接引入并使用。

以下是完成配置后的package.json示例。

{
  "name": "my-ts-lib",
  "version": "1.0.0",
  "description": "My npm package written in TS",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "release": "tsc && npm publish"
  },
  "author": "savokiss",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^3.5.3"
  }
}

以下是最终的tsconfig.json配置。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2017", "es7", "es6", "dom"],
    "declaration": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": ["node_modules", "dist"]
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。