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

WalkerXu 发布于2019-08-26 10:14 / 2617人阅读

摘要：需要注意的是，当你使用私有的类型时，但是这个类型也外部的一部分，这个包的使用者就得不到该类型的类型推断，编译器也会报警告，这时你只需要在该类型前添加即可。并且这也不影响我们发布目录到。

文章读译自 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 ，然后在代码中直接引入使用即可。

下面是完成配置后的 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"]
}

GPU云服务器云服务器一个教你开发小程序的小程序云服务器开机要开30秒每周数百万下载量!NPM包修复了一个远程云服务器打开一个文件秒退

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105838.html

在2018年如何优雅的开发一个typescript语言的npm包？

摘要：实际开发中，如果每个包都去走一遍这些步骤，步骤好像确实有点多。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表很多时候，我们可能想要用 typescript 语言来创建一些模块，并提交到 npm 供别人使用，那么在 2018 年，如果我想要初始化这样的一个模块，我需要做哪些步骤呢？：答案是：创建一个优雅的，对开发者友好的模块，至少需要以下 15...

Karuru 2019-08-16 13:51 评论0 收藏0
手把手教你用typescript撸一个npm包

摘要：但是如果将我们的包还没有测试好，直接发到远程未免显得有点笨拙。发包创建文件在发包之前排除一些没有必要发的文件注册，就按照提示依次填写信息就好了发布由于本人学识有限，有很多需要提升的地方，望大家多多指教。创建一个项目目录 mkdir project 创建package.json npm init 配置tsconfig.json npm -i typescript -g //全局安...

ZHAO_ 2019-08-26 13:52 评论0 收藏0
手把手教你写命令行工具

摘要：命令行工具，即。我们在写命令行工具的时候，需要指定一个可执行文件。或者四调试我们全局安装一个包后，可以全局调用这个命令行工具。命令行工具，即 Cli(command-line interface)。是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。在学习这篇教程之前，你需要先了解NodeJs,NPM和一些常用的...

DevYK 2019-08-23 11:36 评论0 收藏0
教你用Vue渐进式搭建聊天室，从JavaScript=>TypeScript

摘要：前言这个轮子已经有很多人造过了，为了不重复造轮子，我将本项目以三阶段实现大家可以在中的查看纯前端后端前端后端前端希望能给大家一个渐进学习的经验。前言 Vue+Socket.io这个轮子已经有很多人造过了，为了不重复造轮子，我将本项目以三阶段实现（大家可以在github中的Releases查看）：纯前端（Vuex）后端+前端（JavaScript）后端+前端（TypeScrip...

skinner 2019-08-21 17:19 评论0 收藏0
FCC 成都社区·前端周刊第 6 期

摘要：详情发布新版本中可以自动修复和合并冲突的文件，还新增了命令。详情是一个用构建设计系统的开源工具，提供了一套基础应用程序开发的工具，模式和实践。目前，只有和的最新版本支持该属性。详情每周一同步更新到欢迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改进了代码缓存...

Airy 2019-08-30 14:21 评论0 收藏0