返回
Featured image of post NodeJS - npm package

NodeJS - npm package

npm package 如何撰寫 與 發佈

npm 是用來操作 NodeJS 的管理套件工具,平常都使用別人的 open source 常常安裝別人的套件,沒仔細研究一下 package.json 和 npm 指令

建立一個 public package 專案

# 範例以自己的專案為範例:
> mkdir sample-package && cd sample-package
> npm init -y

package.json

{
  "name": "sample-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "hifounder <[email protected]>",
  "license": "MIT"
}

index.js

export const func = () => 'Hello World!'

發佈 public package

> npm login   // npm 官方登入
> npm whoami  // 查看看是否登入成功
> npm publish

引用自己發佈的套件

> mkdir learn-node && cd learn-node
> npm init -y
> npm i sample-package

index.js

import { func } from "sample-package"

console.log(func()) // 'Hello World!'

使用看看

> node index.js

private npm 專案

很多公司內部專案,可將功能分裝成package,由專案與專案間的相依程度來判斷是否要封裝套件,盡而責任分開。
得注意一下 每間註冊流程都不太相同

> npm whoami --repository=https://registry.npmjs.org  // 確定自己登入的 username 是誰

NPM.org

package 路徑位置:https://registry.npmjs.org

帳號狀態專案狀態價位/計算方式/儲存空間上傳上限下載上限
一般/組織 帳號public無限制無限制無限制
一般/組織 帳號private$7美 / 一個專案 /無限制無限制無限制

GitHub

package 路徑位置:https://npm.pkg.github.com

帳號狀態專案狀態價位/計算方式/帳號儲存空間上傳上限下載上限(用於 Github Action)下載上限(非 GitHub Action)
一般/組織 帳號public-無限制無限制無限制無限制
Free 帳號private-500MB無限制無限制1GB/月
Pro / Team 帳號private$4美/一人/帳號2GB無限制無限制10GB/月
Enterprise 帳號private$21美/一人/帳號50GB無限制無限制100GB/月

Azure Devops

package 路徑位置:https://pkgs.dev.azure.com/組織/專案/_packaging/專案/npm/registry/

帳號狀態專案狀態價位/計算方式/帳號儲存空間上傳上限下載上限
User Licensesprivate5人以上開始計價2 GiB free無限制無限制

以 github 為範例

創立 GitHub 金鑰

  1. Github 登入 > 右上角人頭 > Settings > Developer settings > Personal access tokens > 點擊 Generate new token 按鈕
  2. 二次驗證登入

需填寫欄位
需填寫欄位

  • Note: 紀錄用途
  • Expiration: 金鑰過期時間
  • Select scopes: 金鑰用途,基本上本地測試可選填這樣即可
  1. 點擊 Generate token 創建,即擁有一串TOKEN,請保護好
  2. 建立一個組織 - Create Organization
  3. 至 本地目錄 ~/.npmrc 打開 (若無請新增 .npmrc 檔案)
    //npm.pkg.github.com/:_authToken=TOKEN
    
    TOKEN 替換成 3. 的 TOKEN
    > npm login --scope=@OWNER --registry=https://npm.pkg.github.com
    
    > Username: USERNAME
    > Password: TOKEN  注意這邊是用 TOKEN!
    > Email: PUBLIC-EMAIL-ADDRESS
    

使用組織建立專案

> npm init -y
> npm i -D typescript prettier tslint tslint-config-prettier

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./lib",
    "strict": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]
}

package.json

{
  "name": "@sampleOrgforMyself/entities-utils",
  "version": "1.0.0",
  "description": "",
  "main": "./lib/index.js",
  "scripts": {
    "build": "tsc",
    "format": "prettier --write \"src/**/*.ts\" ",
    "lint": "tslint -p tsconfig.json"
  },
  "files": [
    "lib/**/*"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "17.0.25",
    "prettier": "^.6.2",
    "tslint": "6.1.3",
    "tslint-config-prettier": "1.18.0",
    "typescript": "4.6.3"
  }
}

tslint.json

{
   "extends": ["tslint:recommended", "tslint-config-prettier"]
}

.prettierrc

{
  "printWidth": 120,
  "trailingComma": "all",
  "singleQuote": true
}

.gitignore

node_modules
/lib

.npmignore

src
tsconfig.json
tslint.json
.prettierrc

.npmrc

@OWNER:registry=https://npm.pkg.github.com    // 注意這邊要使用 Github申請金鑰的帳號

src/index.ts

export const sample = () => 'Hello World!'
> npm run build
> npm publish

如何 引用

> mkdir use-sample && cd use-sample
> npm init -y
> touch .npmrc

.npmrc

@OWNER:registry=https://npm.pkg.github.com    // 注意這邊要使用 Github申請金鑰的帳號
> npm i @sampleOrgforMyself/entities-utils 

index.ts

import { sample } from '@sampleOrgforMyself/entities-utils'
console.log(sample()) // Hello World!

如何 更新版本

> npm version [major / minor / patch]
> npm publish

參考

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus