教你30秒发布一个TypeScript包到NPM的方法步骤


Posted in Javascript onJuly 22, 2019

文章读译自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"]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 #Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 #Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 #Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 #Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 #Javascript
Vue中遍历数组的新方法实例详解
Jul 21 #Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 #Javascript
You might like
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
JS复制到剪贴板示例代码
2013/10/30 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Python tcp传输代码实例解析
2020/03/18 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
小学校长个人总结
2015/03/03 职场文书