接下來就是要發布 npm 的時候啦！

step 1: 還沒有 npm 帳號的話先註冊一個～

step 2: 登入 npm

npm login

接著會提示按下 ENTER 跳轉到網頁登入

npm notice Log in on https://registry.npmjs.org/
Login at:
https://www.npmjs.com/login?...........................
Press ENTER to open in the browser...

因為我沒有設定二階段驗證 (2FA)，會寄一組一次性的 OTP 驗證碼到註冊的 mail，輸入後就登入成功囉！

 Logged in on https://registry.npmjs.org/.

step 3:

設定 version 與相關資訊 （以後如果有更新 version 也要同步更新）

// package.json
{
  "name": "seal-module", //發布套件的名稱
  "version": "1.0.0", //套件版本號
  "description": "My new Nuxt module", //關於這個模組的描述，可以讓開發人員快速了解模組的具體功能
  "repository": "your-org/my-module", //在 github 上放置程式碼的位置
  "license": "MIT", //版權類型
  "type": "module", //決定使用 ESM 還是 CJS 模式
  "exports": { //定義了不同環境下如何導入這個模組
    ".": {
      "types": "./dist/types.d.ts",
      "import": "./dist/module.mjs",
      "require": "./dist/module.cjs"
    }
  },
  "main": "./dist/module.cjs", //模組的進入點
  "types": "./dist/types.d.ts", //TypeScript 類型定義文件
  "files": [ //發布到 npm 時需要包含的文件或目錄
    "dist"
  ],
  "scripts": {
    "prepack": "nuxt-module-build build",
    "dev": "nuxi dev playground",
    "dev:build": "nuxi build playground",
    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
    "lint": "eslint .",
    "test": "vitest run",
    "test:watch": "vitest watch",
    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
  },
  "dependencies": {
    "@nuxt/icon": "^1.5.1",
    "@nuxt/kit": "^3.13.1",
    "@nuxtjs/tailwindcss": "^6.12.1",
    "defu": "^6.1.4",
    "vue-tippy": "^6.4.4"
  },
  "devDependencies": {
    "@nuxt/devtools": "^1.4.1",
    "@nuxt/eslint-config": "^0.5.5",
    "@nuxt/module-builder": "^0.8.3",
    "@nuxt/schema": "^3.13.1",
    "@nuxt/test-utils": "^3.14.1",
    "@types/node": "^22.5.3",
    "changelogen": "^0.5.5",
    "eslint": "^9.9.1",
    "nuxt": "^3.13.0",
    "typescript": "latest",
    "vitest": "^2.0.5",
    "vue-tsc": "^2.1.4"
  }
}

step 4 : 接著開始打包模組啦

npm run prepack

這樣就是打包成功囉

step 5: 發布到 npm

npm publish 

這樣通常是跟別人有重複名稱了~~(沒想到還有其他海豹阿)~~

如果變成 @feifeiseal/seal-module 會變成私有的狀態，直接 publish 的話會噴出以下錯誤~

需要另外指定參數表示公開

npm publish --access public

當然也可以很乾脆的選擇改名稱～

不小心發錯了也不用擔心，可以下指令刪除

//整包刪除，24小時內可以透過這個指令整包刪除！超過就要聯繫 npm 嚕～
npm unpublish feifeiseal-module

//強制刪除指定版本，刪除後不能重複推同一個版號
npm unpublish @feifeiseal/seal-module@1.0.0 --force

然後就可以在 npm 上面看到熱騰騰的 module 啦

描述的部分可以在 README.md 的部份透過 md 語法撰寫這個模組相關的內容