教你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 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
JavaScript 给汉字排序实例代码
Jun 28 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
JS闭包原理及其使用场景解析
Dec 03 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生成zip压缩文件的方法详解
2013/06/09 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python使用剪切板的方法
2017/06/06 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python自动抢红包教程详解
2019/06/11 Python
使用django实现一个代码发布系统
2019/07/18 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
JSF界面控制层技术
2013/06/17 面试题
停车位租赁协议书
2014/09/24 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
起诉书格式范文
2015/05/20 职场文书
结婚司仪主持词
2015/06/29 职场文书