教你 30 秒发布一个 TypeScript 包到 NPM

时间: 2019-07-21阅读: 1678标签: 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"]
}
原文来自:https://medium.com/cameron-nokes/the-30-second-guide-to-publishing-a-typescript-package-to-npm-89d93ff7bccd
翻译:https://segmentfault.com/a/1190000019827652



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/4299

MAC升级Nodejs和Npm到最新版

MAC升级Nodejs和Npm到最新版,第一步,先查看本机node.js版本:第二步,清除node.js的cache:第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字

关于 npm run eject 报错的问题

关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git

在生产环境中使你的 npm i 速度提升 50%

对于一个前端应用,或者说是一个 Node 应用,在 CICD pipeline 中,无论是构建,测试,部署,其中必不可少的环节就是依赖安装: npm i。npm i 不仅是必不可少的环节,而且很可能也是耗时最长的一个环节。

npm 和 yarn 你选哪个?

每个团队都必须在开发过程中做出各种决定。其中通常会涉及到 yarn,npm 或其它用于构建和打包 javascript 代码的工具。一些开发人员渴望朝着某个方向前进

npm全局安装与本地安装

有两种方式用来安装 npm 包:本地安装和全局安装。选用哪种方式来安装,取决于你如何使用这个包。如果你想将其作为一个命令行工具,那么你应该将其安装到全局。这种安装方式后可以让你在任何目录下使用这个包。比如 grunt 就应该以这种方式安装。

npm世界上最大的软件注册表-

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴

前端npm 安装包,精选大全集合

如果您曾在 Node 或 JavaScript 前端开发中投入过时间和精力,那么您就知道 npm 中有数以十万计的模块可供您选择。挑选模块可能很难,但您只需要一些方法点来解决它。当您正在为如何抉择浪费时间,或者甚至不知道从哪里开始时,请使用本指南来帮助您。

node安装好了npm怎么没有反应?

windows安装完nodejs后做了相关环境变量配置后,cmd输入npm没反应就光标一直闪node是正常的。下面我们就来看一下出现这种情况的可能原因与解决方法。node安装好了npm没有反应的原因与解决方法如下:

在5分钟内搭建企业内部私有npm仓库

下面通过三种方法来搭建公司私有npm仓库,每种方式都有自己的优势。启动并配置服务、设置注册地址、登录cnpm、包上传到私有仓库、查看预览包、通过verdaccio搭建....

NPM 已成为世界上最大的包管理器

Node.js项目的NPM是世界上最大的包管理器,登记了超过35万软件包,是排名第二的Apache Maven的两倍以上。用户在四周时间里从NPM安装了180亿个软件包,但记录的下载次数只有60亿次

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!