教你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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 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(5) 类和对象
2010/02/16 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PDO::errorInfo讲解
2019/01/28 PHP
JavaScript的面向对象编程基础
2015/08/13 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python实现上传下载文件功能
2020/11/19 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python元组常见操作示例
2019/02/19 Python
python 内置函数汇总详解
2019/09/16 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
复核员上岗演讲稿
2014/01/05 职场文书
英文商务邀请信
2014/01/22 职场文书
培训协议书范本
2014/04/22 职场文书
公司委托书格式范文
2014/10/09 职场文书
五年级小学生评语
2014/12/26 职场文书
部门主管竞聘书
2015/09/15 职场文书
2016教师国培研修感言
2015/12/08 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python