教你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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
js实现飞机大战游戏
Aug 26 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
解析htaccess伪静态的规则
2013/06/18 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
php对称加密算法示例
2014/05/07 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
vue-loader教程介绍
2017/06/14 Javascript
JS实现留言板功能
2017/06/17 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
2014年党务公开方案
2014/05/08 职场文书
文明寝室标语
2014/06/13 职场文书
反腐倡廉标语
2014/06/24 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android