教你 30 秒發布一個 TypeScript 包到 NPM

WalkerXu 發布于2019-08-26 10:14 / 2633人閱讀

摘要：需要注意的是，當你使用私有的類型時，但是這個類型也外部的一部分，這個包的使用者就得不到該類型的類型推斷，編譯器也會報警告，這時你只需要在該類型前添加即可。并且這也不影響我們發布目錄到。

文章讀譯自 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 ，然后在代碼中直接引入使用即可。

下面是完成配置后的 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"]
}

云服務器 GPU云服務器一個教你開發小程序的小程序云服務器開機要開30秒每周數百萬下載量!NPM包修復了一個遠程云服務器打開一個文件秒退

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105838.html

在2018年如何優雅的開發一個typescript語言的npm包？

摘要：實際開發中，如果每個包都去走一遍這些步驟，步驟好像確實有點多。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由小明plus發表很多時候，我們可能想要用 typescript 語言來創建一些模塊，并提交到 npm 供別人使用，那么在 2018 年，如果我想要初始化這樣的一個模塊，我需要做哪些步驟呢？：答案是：創建一個優雅的，對開發者友好的模塊，至少需要以下 15...

Karuru 2019-08-16 13:51 評論0 收藏0
手把手教你用typescript擼一個npm包

摘要：但是如果將我們的包還沒有測試好，直接發到遠程未免顯得有點笨拙。發包創建文件在發包之前排除一些沒有必要發的文件注冊，就按照提示依次填寫信息就好了發布由于本人學識有限，有很多需要提升的地方，望大家多多指教。創建一個項目目錄 mkdir project 創建package.json npm init 配置tsconfig.json npm -i typescript -g //全局安...

ZHAO_ 2019-08-26 13:52 評論0 收藏0
手把手教你寫命令行工具

摘要：命令行工具，即。我們在寫命令行工具的時候，需要指定一個可執行文件。或者四調試我們全局安裝一個包后，可以全局調用這個命令行工具。命令行工具，即 Cli(command-line interface)。是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執行。在學習這篇教程之前，你需要先了解NodeJs,NPM和一些常用的...

DevYK 2019-08-23 11:36 評論0 收藏0
教你用Vue漸進式搭建聊天室，從JavaScript=>TypeScript

摘要：前言這個輪子已經有很多人造過了，為了不重復造輪子，我將本項目以三階段實現大家可以在中的查看純前端后端前端后端前端希望能給大家一個漸進學習的經驗。前言 Vue+Socket.io這個輪子已經有很多人造過了，為了不重復造輪子，我將本項目以三階段實現（大家可以在github中的Releases查看）：純前端（Vuex）后端+前端（JavaScript）后端+前端（TypeScrip...

skinner 2019-08-21 17:19 評論0 收藏0
FCC 成都社區·前端周刊第 6 期

摘要：詳情發布新版本中可以自動修復和合并沖突的文件，還新增了命令。詳情是一個用構建設計系統的開源工具，提供了一套基礎應用程序開發的工具，模式和實踐。目前，只有和的最新版本支持該屬性。詳情每周一同步更新到歡迎 01. JS 引擎 V8 v6.6 的更新最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString()，改進了代碼緩存...

Airy 2019-08-30 14:21 評論0 收藏0