教你 30 秒发布一个 TypeScript 包到 NPM

文章读译自 The 30 second guide to publishing a typescript package to npm，部份内容有修改哈。

这篇文章要求你有必定的 JS 、TS 和 NPM 的知识，若是你写过普通的 NPM 包就更好啦~若是没有的话网上也不少教程的，都很简单~

发布过 npm 包的同窗都知道，初始化一个 npm 项目，直接用 npm init -y 就能够了，那若是要用 ts 呢，直接 tsc --init 便可。这两个操做会生成 package.json 和 tsconfig.json 文件。而后咱们按如下步骤修改一下配置：

1. 添加 "declaration": true 到你的 tsconfig.json

这行语句告诉 TypsScript 在编译的时候为你自动生成 d.ts 文件。须要注意的是，当你使用私有的类型时，可是这个类型也外部 API 的一部分，这个包的使用者就得不到该类型的类型推断，TS 编译器也会报警告，这时你只须要在该类型前添加 export 便可。

2. 添加 "types": "index.d.ts" 到你的 package.json

当其余人导入你的包的时候，这句话就告诉了 TS 编译器到哪里去寻找类型定义文件。这里的 .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"]
}

欢迎关注个人公众号：码力全开（codingonfire）

每周更新一篇原创或翻译文章~