介紹
NPM是一個包管理器， 為js開發人員提供可以在項目中使用的模塊，以提高生產率。我使用流行的NPM軟件包，如Lodash和 Date Functions，使我的開發工作流程更簡單。使用NPM包很簡單。您只需使用NPM安裝包，將其導入，然後通過調用函數來調用模塊。
然而，並非所有可用的NPM包都能解決您的問題。有時，您必須編寫自己的代碼來解決問題。但是，如果另一個開發者遇到同樣的問題呢？通過將您剛剛編寫的代碼轉換為NPM包，可以幫助其他開發人員節省無數時間。因此，本文將探討如何創建和發布您的第一個NPM包，以便其他用戶能夠使用您的庫！
創建NPM包出於演示目的，讓我們創建並發布一個數學庫，該庫能夠：
在我們開始開發庫之前，請確保您滿足以下條件
NPM需要身份驗證令牌才能從終端訪問您的NPM帳戶。在終端（或命令提示符）中，運行命令npm login。輸入您的NPM用戶名和密碼，通過NPM CLI登陸您的NPM帳戶。如果已成功登錄到您的NPM帳戶，應該會看到下面的輸出。
image.png步驟03-初始化新的NPM包成功設置NPM後，我們可以創建一個空的NPM包，用於編寫數學庫。為此，請定位到代碼文件夾運行下面的命令。
npminit它會要求您輸入庫的名稱。需要注意的是，庫名稱必須是唯一的。我將把我的軟件包命名為「math-computers」。對於其餘配置，請使用CLI提供的默認值。之後，它將生成一個包。包含元數據、第三方依賴項的json文件。你的package.json應該如下所示。
{"name":"math-computers","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo"Error:notestspecified"&&exit1"},"repository":{"type":"git","url":"git+https://github.com/lakindu2002/math-computer.git"},"author":"LakinduHewawasam","license":"MIT","bugs":{"url":"https://github.com/lakindu2002/math-computer/issues"},"homepage":"https://github.com/lakindu2002/math-computer#readme"}步驟04-配置ESLint安裝ESLint是可選的，但在編寫JavaScript代碼時建議這樣做。ESLint有助於檢測潛在的bug、漏洞，並實施編碼最佳實踐，以確保庫的性能良好。因此，我個人在所有JavaScript項目中都使用ESLint。要將ESLint添加到新的NPM包中，只需在項目的根目錄中運行命令NPM init@ESLint/config。在這個過程中，確保讓命令將ESLint作為開發依賴項安裝。此外，該命令將要求您設置自定義配置。為此，添加如下所示的配置。
確定在項目中使用ESlint
選擇JS modules的類型
選擇項目的框架
是否使用ts
選擇平台
風格
選擇Airbnb代碼風格
選擇配置文件的類型
提供這些配置選項後，該命令將在根目錄中生成一個ESLint配置文件（.eslintrc.yml），配置如下所示。
作為現代JavaScript開發人員，我們熟悉使用ECMA2015+。因此，我們將使用ECMA2015+來編寫我們的NPM包。因此，為了提高兼容性，我們需要將包中的代碼轉換為跨瀏覽器兼容的JavaScript。這就是Babel發揮作用的地方。將Babel添加到NPM項目很簡單。首先，您需要在項目中安裝Babel作為開發依賴項。要執行此操作，請運行下面的命令。
npminstall--save-dev@babel/cli@babel/core@babel/preset-env然後在根目錄中創建一個名為「.babelrc」的文件來配置Babel。將下面顯示的代碼添加到新創建的文件中，以便為您的NPM項目成功配置Babel。
{"presets":[["@babel/env",{"targets":{"node":"current"}}]],"plugins":["@babel/plugin-proposal-class-properties","@babel/plugin-proposal-object-rest-spread"]}上面顯示的配置將確保我們可以在JavaScript文件中使用展開運算符、類和import/export語句。
第06步-編寫數學函數創建所需的目錄 在配置開發依賴項（如ESLint和Babel）之後，我們可以開始編寫數學庫。首先，讓我們在根目錄中創建一個名為「lib」的新目錄。「lib」目錄指定庫代碼。在目錄中，創建另一個名為「modules」的目錄。在「模塊」目錄中，創建兩個文件：
為NPM包定義函數時，始終確保函數是可單元測試的。它可以確保你的代碼沒有bug，而且可靠性很好。
添加奇偶函數考慮到這一點，讓我們在文件number-functions.js中添加用於檢測奇數和偶數的函數。該代碼如下所示。
//moduletocomputeoddandevennumbers/***Thisfunctionwillbeusedtodetermineifanumberifanevennumber.*@param{Number}number:Numbertobetested*@returns{Boolean}Abooleantoindicateifthenumberisevenornot.*/exportconstisEven=(number)=>number%2===0;/***Thisfunctionwillbeusedtodetermineifanumberifanoddnumber.*@param{Number}number:Numbertobetested*@returns{Boolean}Abooleantoindicateifthenumberisoddornot.*/exportconstisOdd=(number)=>number%2!==0;上面代碼片段聲明了兩個函數，它們接受一個數字，並測試奇數和偶數。您可能會注意到這兩個函數都被導出。這樣做是為了確保安裝庫的用戶可以將所需的函數導入到他們的項目中。
添加數學函數之後，我們可以打開到math-functions.js文件，並添加執行數學計算所需的函數。這些函數如下所示。
/*eslint-disablearrow-body-style*//*eslint-disablemax-len*///moduletoperformmathematicaloperationsconststartingPoint=0;/***Thismethodwillacceptanarrayofnumbersandcomputethesumofallthenumbers.*@param{number[]}numbers-Anarrayofnumberstobesummed.*@returns{number}-Thesumofallthenumbersinthearray.*/exportconstadd=(numbers)=>{returnnumbers.reduce((total,currentNumber)=>total+currentNumber,startingPoint,);};/***Thismethodwillacceptanarrayofnumbersandsubstracteachnumberfromthenextnumberinthearray.*@param{number[]}numbers-Anarrayofnumberstobesubstracted.*@returns{number}-Thevaluecomputed.*/exportconstsubtract=(numbers)=>{returnnumbers.reduce((total,currentNumber)=>total-currentNumber,startingPoint,);};/***Thismethodwillacceptanarrayofnumbersandmultiplyeachnumberfromthenextnumberinthearray.*@param{number[]}numbers-Anarrayofnumberstobemultiplied.*@returns{number}-Themultipliedanswer.*/exportconstmultiply=(numbers)=>{returnnumbers.reduce((total,currentNumber)=>total*currentNumber,startingPoint+1,);};/***Thismethodwillacceptanarrayofnumbersanddivideeachnumberfromthenextnumberinthearray.*@param{number[]}numbers-Anarrayofnumberstobedivided.*@returns{number}-Thedividedanswer.*/exportconstdivide=(numbers)=>{returnnumbers.reduce((total,currentNumber)=>total/currentNumber,startingPoint+1,);};您可能已經注意到，我們為每個函數添加了一個JavaScript文檔。這樣做是為了為最終用戶提供一個指南，讓他們了解函數。
在入口文件index.js中導出函數為了確保用戶能夠在不深入庫的情況下導入函數，我們可以在根目錄中添加一個文件「index.js」，然後從該文件導入和導出所有函數。這樣，用戶可以通過index.js文件導入所有函數。如下所示。
const{add,divide,subtract,multiply,}=require('./lib/modules/math-functions');const{isEven,isOdd}=require('./lib/modules/number-functions');module.exports.add=add;module.exports.divide=divide;module.exports.subtract=subtract;module.exports.multiply=multiply;module.exports.isEven=isEven;module.exports.isOdd=isOdd;第07步-測試庫使用Babel創建分發文件將函數添加到index.js後 ，我們現在可以為庫生成分發代碼了。這是通過使用下面的命令使用Babel完成的。
npxbabellib--out-dirdist這將在根目錄中創建一個名為「dist」的新目錄，其中包含已編譯的JavaScript。
鏈接包進行本地測試之後，我們可以開始測試NPM庫。我們不需要發布庫來測試它。NPM允許我們通過命令NPM link在本地鏈接庫來模擬這個過程。這將創建一個可以在本地安裝的包的全局版本。要模擬安裝，請執行命令npm link<< PACKAGE-NAME >>，將包添加到測試項目的node_modules中。首先，讓我們先在我們創建的npm項目上運行npm link。
image.png在本地測試包之後，您可以在本地測試包。為此，我將使用npx create React app my test app生成一個React應用程序。在React應用程序中，打開一個終端並運行命令npm link<< PACKAGE-NAME >>，將本地模擬的數學包鏈接到React應用程序，以便對其進行測試。
image.png之後，我們可以開始在React應用程序中使用該庫。它的示例用法如下所示。
import"./App.css";import{add,divide,isEven,isOdd,multiply,subtract}from"math-computers";constApp=()=>{constnumbers=[1,2,3,4,5,6,7,8,9,10];return(<divclassName="App"><div>NumberList:{numbers.join(",")}</div><div>Addition:{add(numbers)}</div><div>Subtraction:{subtract(numbers)}</div><div>Multiplication:{multiply(numbers)}</div><div>Division:{divide(numbers)}</div><div>Is3Odd:{isOdd(numbers)?"True":"False"}</div><div>Is3Even:{isEven(numbers)?"True":"False"}</div></div>);};exportdefaultApp;上面的代碼片段顯示了正在導入和被調用的庫。
image.png輸出如下所示。
我們的庫成功通過了測試！我們可以繼續並將NPM包發布到NPM倉庫，以便其他用戶可以下載和使用該庫。
步驟08-將庫發布到NPM要發布NPM庫，請在NPM項目上打開一個終端，然後運行如下所示的命令。
npmpublish這將自動發布您的NPM包，並使其可供外部用戶使用。
image.png您已經成功創建並發布了第一個NPM包。可以通過運行下面的命令來嘗試這個包。
npmimath-computers//installthepackagewepublished總結本文深入探討了如何創建和發布NPM包，第三方開發人員可以下載該包以供使用。希望本文鼓勵您創建自己的NPM包，並為Node.JS開發者社區做出貢獻！
譯自:https://enlear.academy/publishing-your-first-npm-package-abaa9e9ee4c2
少爺，公主，點個關注和在看唄！
留言列表