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

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

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

(0)

相关推荐

  • 使用typescript开发angular模块并发布npm包

    本文介绍了使用typescript开发angular模块并发布npm包,分享给大家,具体如下: 创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下,name默认为文件夹名称 { "name": "MZC-Ng-Api", "version": "1.0.0", "description": "", "mai

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

    文章读译自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 和 ts

  • IDEA 中 30 秒创建一个 Spring Cloud Alibaba 工程

    如果你想使用 Spring Cloud Alibaba,那么你遇到的第一个问题一定是如何快速的创建一个脚手架工程. 近日,阿里巴巴发布了 Spring 的国内脚手架定制版 Aliyun Java Initializer,因为全中文界面和流畅速度,被广大开发者热传.Spring 脚手架为开发者提供了丰富的可选组件,并且可以选择多种打包方式,大大方便了开发人员的使用.Web 端 Spring 脚手架可以帮助用户快速上手,但很多开发者也面临一个问题:在 Web 版本 Spring 脚手架生成工程最终要

  • 教你一分钟在win10终端成功安装Pytorch的方法步骤

    小书学习的主要方向是TensorFlow和Pytorch,今天就来安装一下Pytorch. 第一步:去官网看看 Pytorch官网:(https://pytorch.org/) 点击get started 第二步:选择与自己相匹配的版本,这里显示是我安装的选择. 复制命令到win10终端: 第三步:成功安装: C:\Users\Shu\Desktop>pip3 install http://download.pytorch.org/whl/cpu/torch-0.4.1-cp36-cp36m-w

  • 用vue封装插件并发布到npm的方法步骤

    一.基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号. 全球区号列表 1.1 初始化组件 用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来. vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev 1.2 根据自己的需求,实现具体功能,我的主要功能写在v

  • 从零搭一个自用的前端脚手架的方法步骤

    为什么要弄个脚手架 对于我个人,经常写些demo,或者写一个新项目的时候,要么就是把以前的项目模板复制一份,要么就是重新搭建一份,显得比较麻烦,浪费时间,所以就有了搭建一个能满足自己需要的脚手架. 脚手架的效果 这是一个基本的脚手架,init一个项目,输入项目名称,版本号等信息,然后从git仓库拷贝一份自己需要的项目模板.类似vue的vue-cli或者react的create-react-app,只是这个比较简单. 基本思路参考下图 这部分参考了掘金@张国钰大佬的思路. 项目结构 主要3个,一个

  • 搭建一个Koa后端项目脚手架的方法步骤

    一.背景 结合当前的node比较火的三大框架,Express.Koa.egg.笔者之前用的Express,后面发现回调把我搞死了,实在太无奈了.终于有一天去尝试了Koa来进行开发,发现实在太舒服了.ES6语法支持很多,同步模式也很到位,但是在学习koa的过程中,发现基本的基础知识都了解了,也按照官方的文档走了一遍,但发现好像无从下手.感觉开发过程中,分层不太明显,业务逻辑简单还好,一多麻烦就来了.查看了资料后,有一个koa的脚手架叫做 koa-generator ,马上尝试后发现不是我想要的模板

  • PHP检测一个数组有没有定义的方法步骤

    php中定义数组的方法: 1.PHP定义数组的格式: 数组名=array(); 如:$aa=array();//这样就定义了一个数组, 之后给元素赋值: $aa[0]="9016"; $aa[1]="9017"; $aa[2]="9018"; 2.PHP输出数组的方法: foreach($aa as $val) { echo$val; } 也可以在定义数组时直接赋值 $aa=array(0=>"9016",1=>&

  • 基于vue如何发布一个npm包的方法步骤

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready? Go! 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.json 文件 我们可以根据自己的需要补充文件内容 这是我的: { "name"

  • 详解如何制作并发布一个vue的组件的npm包

    前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he

  • 教你使用python搭建一个QQ机器人实现叫起床服务

    目录 前言 具体实现 1.定时发送信息 2.让机器人陪女朋友聊天 3.调用一些有趣的接口 前言 上一篇文章介绍了怎么配置机器人框架,并且实现了一些简单的功能. (发送私聊或者群聊信息.接收上报的事件.简单的自动回复等等) 这次为了让QQ机器人更加智能,调用了一些实用的接口. 通过自己搭建的机器人实现定时叫女朋友起床.和女朋友聊天等功能. 如上图所示,我的机器人每天都会准时叫女朋友起床:并且在我忙的时候然而女朋友无聊的时候可以陪她聊一会天. 具体实现 以下实现的功能都需要机器人已经配置完成,并且已

随机推荐