發布 npm 套件

記錄一下，關鍵在於打包的 folder 路徑

package.json

可以使用 npm init --scope=@your-name 建立或直接修改原本的 pacakge.json 的 name，要注意 name 在 npm 上面必須是唯一的

key	description
name	套件名稱，如為 scoped 就使用`@your-name` 開頭
type	為 `module` 表示為 esm，導出的 .js 才能被 es6 語法 import，否則要用 .mjs
main	package 進入點
exports	這裡表明了使用 esm 或 cjs 時對應的檔案
files	安裝的檔案

{
    "name": "@your-name/package-name",
    "license": "MIT",
    "version": "0.0.1",
    "description": "package description",
    "type": "module",
    "scripts": {
        // ...
    },
    "devDependencies": {
        // ...
    },
    "dependencies": {
        // ...
    },
    "files": [
        "/dist/components/",
        "/dist/hooks/",
        "/dist/types/",
        "/dist/index.d.ts",
        "/dist/index.js"
    ],
    "main": "dist/index.js",
    "exports": {
        ".": {
            "import": "./dist/index.js",
            "require": "./dist/index.umd.cjs"
        }
    }
}

exports 的設定有其對應的打包工具會吃（tsup, unbuild），假如使用 vite 的話此設定無效，因為是透過 vite 設定打包，如需修改打包結果可修改build.lib 參數

export default defineConfig({
    build: {
      lib: {
        entry: path.resolve(root, 'index.ts'),
        // 預設會建立 es(import) 與 umd(require)
        // format: ['es', 'umd', 'amd', 'cjs']
        name: 'index',
        fileName: 'index',
      },
    },
  };
});

關於 4 種 module 的異同可參考我的這篇文章

publish

註冊 npmjs.org 帳號
local 登入

npm login

3.發布套件

# 發布公開套件
npm publish --access public
# 發布私有套件（付費帳戶）
npm publish

發佈時間 2023-4-7

#nodejs #npm