技術標籤：NodeJs開發進階

目錄

• 具體步驟
• 呼叫你的模組
• 支援ts(typescript)型別檔案
• 使你的模組擁有程式碼提示功能
• 參考

具體步驟

• 因為需要上傳到npm，所以需要現在npm註冊一個帳號，註冊地址Here

注：最好不要用QQ郵箱，不然可能會接收不到驗證郵件，實測谷歌郵箱是可以的

• index.js檔案，寫入如下內容

module.exports={
    add:function (a, b) {
        return a+b;
    },
    sub:function (a, b) {
        return a-b;
    }
}

• 再在同級目錄下新建個package.json檔案，寫入如下內容

{
  "name": "moduleName",
  "version": "1.0.1",
  "description": "module description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
 

  },
  "files": [
    "index.js"
  ],
  "keywords": [],
  "author": "my name",
  "license": "ISC"
}

注1：moduleName儘量寫得特殊點，否則一會上傳可能會出現模組同名的問題
注2：files可以指定要上傳的檔案或目錄，防止上傳一些不相關檔案

• 或者開啟命令列，cd到index檔案所在目錄，然後執行如下命令初始化npm倉庫，也是一樣的效果，在執行後會讓你輸入上面的相關資訊

npm init

注：git 地址若沒有，可不用輸入

• 然後執行如下命令進行登入npm，接著會讓你輸入賬號資訊，輸入上面註冊的帳號就行了

npm login

• 最後執行如下命令釋出模組

npm publish

注：若是遇到403問題，請先確定是否已經驗證完郵箱，若不是郵箱問題，請參看其他解決方案Here

• 驗證是否釋出成功，可以訪問如下地址

https://registry.npmjs.org/{Your Module Name}

呼叫你的模組

• 在其他專案匯入該模組，具體在其他專案的package.json新增以下程式碼

{
   //...
  "dependencies": {
    "moduleName": "^1.0.0"
  }
}

• 然後在該專案下執行如下命令以下載你的模組程式碼

npm install

• 然後在該專案的js檔案裡通過如下程式碼引用你的模組

    const module= require("moduleName")
    console.log('add:',module.add(1,2))

支援ts(typescript)型別檔案

• 上面的模組僅僅支援js檔案，不支援ts檔案，接下來就講解下如何支援ts檔案
• 在package.json裡新增如下程式碼

{
//...
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "typescript": "^3.5.3"
  }
}

• 然後執行如下命令以下載typescript程式碼

npm install

• 在專案根目錄下新建tsconfig.json，並填入如下內容

{
  "compilerOptions": {
    "outDir": "./dist/",
    "target": "es2020",
    "module": "CommonJS",
    "allowJs": true
  },
  "include": ["src"],
  "exclude": ["node_modules","dist",".idea"]
}

• 將原來的index.js重新命名為math.js並移動到src目錄
• 在src目錄新建index.ts檔案，並填入如下內容

const mod=require('./math')
console.log('add:',mod.add(2,3))

• 然後執行如下命令編譯所有指令碼到dist目錄下

npm run build

注：這個build就是上面package.json裡scripts裡的build，其實就是執行tsc命令，以將ts檔案轉成目標index.js檔案

• r然後會在dist目錄下生成如下檔案
  
• 然後執行如下命令執行index.js，看看是否執行成功

node ./dist/index.js

使你的模組擁有程式碼提示功能

• 上面的模組正常匯入時是沒法有程式碼提示的，如何讓其有程式碼提示功能呢，請往下看
• 其實只要在tsconfig.json新增以下程式碼即可

{
  "compilerOptions": {
  //...
    "declaration": true
  }
  //...
}

• 然後執行如下命令就可以得到實現程式碼提示的關鍵檔案index.d.ts

npm run build

• 然後我們再在package.json裡匯入該index.d.ts檔案

{
//...
  "types": "dist/index.d.ts"
//...
}

• 然後更新下版本號，再執行以下命令以釋出新版本

npm publish

• 在其他專案再更新下到該版本，就可以擁有程式碼提示功能了

前提是在WebStorm裡編寫程式碼

參考

• 1.[譯文]一步步構建釋出一個 TypeScript NPM 包
• 2.npm 釋出一個簡單的 TypeScript 模組
• 3.釋出一個具有提示功能的npm包