首頁 > web前端 > js教程 > 使用 TypeScript 和語義版本控制建立並發布 npm 庫

使用 TypeScript 和語義版本控制建立並發布 npm 庫

DDD
發布: 2024-09-13 14:15:10
原創
936 人瀏覽過

?編寫並發布最少的程式碼

要在 npm 上發布庫,您需要:

  1. 一個npm 帳戶;你可以在這裡註冊。

  2. 您的程式碼作為一個專案;即,您的程式碼目錄中有一個 package.json,其中指定了名稱和版本。請注意,您可以透過以下方式產生此文件:

npm init
登入後複製
    您專案中的
  1. index.js。請記住,您需要匯出函數才能允許使用者匯入它。

注意: 如果您的腳本未命名為index.js 並放置在專案根目錄中,則需要在package.json 中指定「main」屬性。請參閱此答案以獲取更多資訊。

如果該名稱已在 npm 上使用,您可以添加 @name-or-org/your-lib 等前綴;這就是當今大多數其他圖書館所做的。

你可以查看我的最小範例作為參考,但我相信你可以寫出比這更酷的東西。

Create and publish an npm library, with TypeScript and Semantic Versioning

最後,使用 CLI 指令發布:

npm publish
登入後複製

Create and publish an npm library, with TypeScript and Semantic Versioning

人們設定帶有前綴的套件名稱時請注意:必須是您在npm上註冊的npm使用者名稱或組織名稱。例如,我可以使用 @remi_guan 作為我的前綴,但不能使用其他前綴。

此外,您需要執行 npmpublish --access public,因為 npm 認為您想要發布私有包,這是一項付費功能。

出現這個輸出就表示已經成功了。不過,如果您遇到問題,可以透過 Google 搜尋來排除故障。以下是您如何使用自己的函式庫:

Create and publish an npm library, with TypeScript and Semantic Versioning

如果您一直在遵循本指南,請嘗試使用您自己的程式庫。

如果您想了解更多,我還發現@backendbro 有比這更詳細的指南。

發布程式碼後,當您想要更新程式碼時,可以再次執行 npmpublish。不過,在發布之前,您應該更新package.json的版本屬性,並請遵守語意版本控制。

我建議你試試看!您能否發布您的庫的 v1.0.1 或 v1.1.0,並在另一個專案中使用它,就像我剛剛所做的那樣?你能弄清楚如何更新你的 npm 函式庫的版本嗎?

?使用打字稿

到目前為止,我們創建的這個庫還不是現代的,它缺少類型聲明,因此使用你的庫的人無法透過鍵入來突出顯示。此外,人們通常使用具有 ECMAScript 語法的 TypeScript。要了解差異,請參閱 Saisathish 的《Node.js 模組:CommonJS with ECMAScript》

但是我將在這篇文章中跳過 TypeScript 的詳細設定。有很多很好的教學可以學習如何初始化 TypeScript 項目,例如 inapeace0 的「如何開發 Typescript 函式庫」。

更進一步,您可以使用模板 TypeScript 儲存庫,例如 alexjoverm/typescript-library-starter,它已經整合了許多現代工具、最佳實踐等。

如果您要發布 TypeScript 庫,我只想提一些重要的注意事項:

  1. 發布前建置。 如果需要公開發布,擁有最常見的 Node.js 環境的人只能執行 .js 檔案。所以你需要使用 tsc、rollup(或 vite,它使用 rollup)或 webpack 來編譯你的程式碼;任何一個都可以。

您需要使用package.json中的module、main或entry屬性正確指向編譯後的檔案。使用模板並一一學習是不錯的選擇。再次,alexjoverm/typescript-library-starter 很好地指定了它們。

  1. 包含 .d.ts 檔。 出於同樣的原因,使用者還需要存取類型簽名。

但是如果您確定您的程式庫將在 Deno、Bun 或 ts-node 上運行,您可以忽略我的上述準則,因為它們支援本機運行 TypeScript 程式碼。

請嘗試按照指南建立 TypeScript 庫並將其發佈到 npm。這仍然很簡單,就像第一個例子一樣。您應該使用匯入語法在另一個專案中對其進行測試,並且可以使用 IDE 查看類型提示。

使用 TypeScript,我可以用以下語法寫我的函式庫:

Create and publish an npm library, with TypeScript and Semantic Versioning

發布後,我可以安裝並匯入它,並透過 TypeScript 查看類型提示。

Create and publish an npm library, with TypeScript and Semantic Versioning

✨ Semantic Versioning

There's a common but slightly advanced problem waiting to be solved: Each time we update our package, we need to edit the version code.

That's annoying, especially if you're frequently updating your code.

However, there are tools to help you out.

  • semantic-release: Fully automatic; you can integrate it into GitHub CI to automatically update the version code and publish to npm each time you update your code on GitHub.
  • release-it: Also helps you bump the version, but it's simple to use (no need for CI knowledge); meanwhile, you don't configure it as fully automated.

Create and publish an npm library, with TypeScript and Semantic Versioning

I used ChatGPT to generate this summary comparing the two tools. For new coders, I'd suggest you try release-it, but semantic-release is also convenient if you know how to integrate it with CI.

In this post I'm going to show you how to use release-it, well, after you have made change to the project, simply run this in your project:

npx release-it
登入後複製

And choose is it a minor change or major change, then you're done!

Create and publish an npm library, with TypeScript and Semantic Versioning


Summary

So there you have it! We've walked through publishing a simple npm library, updating it, and even using TypeScript to make it more modern and robust. Remember to:

  • Export your functions properly so others can use them.
  • Update your version numbers following Semantic Versioning.
  • Consider using TypeScript for better type safety and developer experience.
  • Automate your releases with tools like release-it or semantic-release to save time.

Give it a try! Publish your own library, update it, and see how it feels to contribute to the npm ecosystem. Happy coding!

以上是使用 TypeScript 和語義版本控制建立並發布 npm 庫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板