教你 30 秒发布一个 TypeScript 包到 NPM小白攻略_npm使用教程

文章读译自 The 30 second guide to publishing a typescript package to npm,部分内容有修改哈。这篇文章要求你有一定的 JS 、TS 和 NPM 的知识,如果你写过普通的 NPM 包就更好啦~如果没有的话网上也很多教程的,都很简单~发布过 npm 包的同学都知道,初始化一个 npm 项目,直接用 np

教你 30 秒发布一个 TypeScript 包到 NPM小白攻略

文章读译自 The 30 second guide to publishing a typescript package to npm,部分内容有修改哈。这篇文章要求你有一定的 JS 、TS 和 NPM 的知识,如果你写过普通的 NPM 包就更好啦~如果没有的话网上也很多教程的,都很简单~

教你 30 秒发布一个 TypeScript 包到 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"]
}
海计划公众号
(0)
上一篇 2020/03/29 01:39
下一篇 2020/03/29 01:39

您可能感兴趣的内容

  • 双向数据绑定与单向数据绑定的各自优势和关系菜鸟攻略_数据使用攻略

    在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。一、各自优势双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时,页面自动发生更新。但是有一个缺点也是因为自动更新而导致的,因为这样你就不知道data什么时候变了,也不知道

    2020/04/06
  • wow.js使用方法及部分常用属性和动画特效类菜鸟攻略_wow.js小白基础

    WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件,在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。一、页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意

    2020/04/03
  • Flutter 之 ListView零基础入门_Flutter基础知识入门

    在 Flutter 中,ListView 可以沿一个方向(垂直或水平方向)来排列其所有子 Widget,常被用于需要展示一组连续视图元素的场景ListView 构造方法ListView:仅适用于列表中含有少量元素的场景ListView.build:适用于子 Widget 比较多的场景ListView.separated:适用于需要设置分割线的场景构造方法名特

    2020/03/23
  • 社交约会指南攻略正确的打开方式_约会零基础入门

    众所周知,纽约是世界上结婚率最低的城市。和国内情况完全不一样的是,这里的人自信程度比较高,甚至不只高一个级别,思想也是比较开放,勇于接受新的事物,并且相对来说比较独立。独立,这个东西,我分析过,一般体现在几个方面:首先,你是个情绪稳定的人,不会象个孩子一样情绪严重受外界影响。其次,你是个经济独立的人,你可以为自己喜欢的东西买单。最后,你是个善于主动去理解这个

    2020/03/22
  • SimpleIcons攻略教程_常见品牌SVG免费下载网

    SimpleIcons攻略教程 官方网址:https://simpleicons.org/ 简介描述:常见品牌SVG免费下载网 SimpleIcons是一个收录了常见品牌SVG图标…

    2020/03/06
  • JS之继承(ES5 & ES6)入门攻略_继承使用指南

    定义继承到底是什么?维基百科是这样说的:继承(英语:inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法。var a = new Array()
    a.valueOf()上面的a为什么可以使用val

    2020/03/29
  • CssMatic菜鸟教程在线CSS网页设计工具

    CssMatic入门指南 官方网址:https://www.cssmatic.com/ 简介描述:在线CSS网页设计工具 在线CSS网页设计工具是一个非营利性的网站设计师在线开发工…

    2020/03/06
  • 程序员必备的学习工具入门百科_工具基础指南

    01 搜索资源网站学习技术过程我们经常需要使用搜索引擎来检索资料,国内常用的也就是某度了。当然有条件的话,搜索引擎首先还是推荐使用 Google,如果没办法使用,可以使用以下几个作为备用:BingBing 国际版:https://cn.bing.com/比某度好用,之前还被停用了几天,最近可以了。DuckDuckGoDuckDuckGo:https://du

    2020/03/20
  • PhotoClip.js小白知识_一款手势驱动的裁图插件

    PhotoClip.js小白知识 GitHub:https://github.com/baijunjie/PhotoClip.js 简介描述:一款手势驱动的裁图插件 一款手势驱动的…

    2020/03/11
  • javascript代码语句结束要不要加分号?小白指南_代码基础知识教程

    在 C 语言中,分号是语句结束的标志,在语句结束的地方一定要以分号结束。而 JavaScript 的分号却是可选的,若语句都各占一行,则可以省略分号。JavaScript 中的 ASI 机制,允许我们省略分号。ASI 机制不是说在解析过程中解析器自动把分号添加到代码中,而是说解析器除了分号还会以换行为基础按一定的规则作为断句的依据,从而保证解析的正确性。AS

    2020/03/20
  • Forge入门攻略_一个 TLS 协议的本地实现

    Forge入门攻略 官方网址:https://digitalbazaar.com/ GitHub:https://github.com/digitalbazaar/forge 简介…

    2020/03/07
  • Js数学对象Math新手入门_对象指南教程

    写在前面:Javascript 中Math和其他对象不同,它具有数学常数和函数的属性和方法。因为它的属性是数学常数,所以不能被改变(可以进行赋值操作,但最后值不变)。Math的方法就是普通函数,调用他们直接用Math.method即可,而无需使用new关键字创造它的实例。JS中的其他对象也有类似这样的方法,但那只占他们的一小部分,而Math的方法全部都是这样

    2020/03/26
  • Vue – 自定义组件双向绑定小白攻略_双向绑定指南攻略

    前言无论在任何的语言或框架中,我们都提倡代码的复用性。对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率。我真就接手过一个项目,多个页面都会用到的列表,没有去封装列表组件,只要有一点改动,每个页面都得加上。很肯定的说,没有用组件化开发的Vue项目是没有灵魂的。所以如何封装一个优雅且复用性高的组件成为我们必需的技

    2020/03/20
  • vue 监听组件原生事件小白指南使用vue中的修饰符.native_修饰符使用指南

    vue中.native是什么?.native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。官方对.native修饰符的解释为:有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:</my-co

    2020/04/05
  • Js:高效使用数组的方法入门基础教程_数组使用指南

    要在给定数组上使用方法,只需要通过[].方法名即可,这些方法都定义在 Array.prototype 对象上。在这里,咱们先不使用这些相,反,咱们将从简单的方法开始定义自己的版本,并在这些版本的基础上进行构建。没有比把东西拆开再重新组装起来更好的学习方法了。注意,当咱们的实现自己的方法时,不要覆盖现有的方法,因为有的库需要它们,并且这样也方便比较咱们自己的方

    2020/03/26
  • javascript如何四舍五入?基础知识教程_运算使用帮助

    javascript四舍五入的方法:方法一、使用toFixed()方法可把Number四舍五入为指定小数位数的数字。方法二、使用round()方法可把一个数字舍入为最接近的整数。1 、tofixed方法toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。语法NumberObject.toFixed(num)参数:规定小数的位数,是 0

    2020/03/22