[{"data":1,"prerenderedAt":598},["ShallowReactive",2],{"blog:\u002Fblog\u002Fnodejs\u002Fpackage-manager":3},{"id":4,"title":5,"author":6,"body":7,"category":585,"date":586,"description":587,"draft":588,"extension":589,"image":590,"meta":591,"navigation":592,"path":593,"seo":594,"series":590,"seriesOrder":590,"seriesTitle":590,"stem":595,"tags":596,"updatedAt":590,"__hash__":597},"blog\u002Fblog\u002Fnodejs\u002Fpackage-manager\u002Findex.md","認識 Node.js 的 Package Manager","charles",{"type":8,"value":9,"toc":575},"minimark",[10,15,27,35,58,61,65,68,71,103,107,321,324,328,331,350,353,364,367,571],[11,12,14],"h2",{"id":13},"認識-node-package-manager-npm","認識 Node Package Manager (npm)",[16,17,18,19,26],"p",{},"Node.js 的 Package Manager 稱為 npm，是 Node.js 的官方套件管理工具，提供了一個龐大的套件庫供開發者使用，並且可以透過 npm 安裝、更新、移除套件。所有可供下載的套件都會放在 npm 的官方網站 ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fwww.npmjs.com\u002F",[24],"nofollow","npmjs.com"," 上。",[16,28,29,30,34],{},"當你完成 Node 的安裝 (參考",[20,31,33],{"href":32},"\u002Fblog\u002Fnodejs\u002Fnvm","用 NVM 管理 Node.js 版本",")，npm 也會一併安裝在你的電腦上，你可以透過以下指令來確認 npm 是否已經安裝：",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","npm -v\n","bash","",[43,44,45],"code",{"__ignoreMap":41},[46,47,50,54],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sbgvK","npm",[46,55,57],{"class":56},"stzsN"," -v\n",[16,59,60],{},"如果你看到 npm 的版本號，代表 npm 已經安裝完成。",[11,62,64],{"id":63},"npm-yarn-pnpm-的差異","npm \u002F yarn \u002F pnpm 的差異",[16,66,67],{},"在 JavaScript 的開發生態中，你會經常看到一個套件同時提供了 npm、yarn、pnpm 三種安裝方式，這三種套件管理工具有什麼差異呢？",[16,69,70],{},"簡單來說，這三種套件管理工具的功能都是一樣的，都是用來安裝、更新、移除套件，且都是存取 npm 官網的套件，但是在效能、安全性、穩定性等方面有所不同：",[72,73,74,85,91],"ul",{},[75,76,77,80,81,84],"li",{},[78,79,53],"strong",{},"：Node.js 的官方套件管理工具，是最早出現的套件管理工具，但是在安裝套件時會將套件的依賴複製到專案的 ",[43,82,83],{},"node_modules"," 資料夾中，當專案中有多個套件使用相同的依賴時，會造成硬碟空間的浪費。",[75,86,87,90],{},[78,88,89],{},"yarn","：由 Facebook (Meta) 開發的套件管理工具，是 npm 的替代品，改善了 npm 的一些缺點，包含並行下載加快安裝速度，複雜專案的套件相依自動處理的穩定性更佳。",[75,92,93,96,97,99,100,102],{},[78,94,95],{},"pnpm","：是目前更主流廣泛使用的套件管理工具，與 npm、yarn 不同的是，pnpm 主打將套件的依賴放在全域的 ",[43,98,83],{}," 資料夾中，並且使用硬連結的方式來連結到專案的 ",[43,101,83],{}," 資料夾，專案數量增加時可以顯著節省硬碟空間，且可以避免套件的依賴重複安裝，也因此節省大量重新下載重複套件的時間。",[104,105,106],"h3",{"id":106},"功能比較",[108,109,110,111,110,130,320],"table",{},"\n    ",[112,113,114,115,110],"thead",{},"\n      ",[116,117,118,119,118,123,118,125,118,128,114],"tr",{},"\n        ",[120,121,122],"th",{},"Feature",[120,124,95],{},[120,126,127],{},"Yarn",[120,129,53],{},[131,132,114,133,114,146,114,160,114,173,114,185,114,196,114,207,114,218,114,229,114,250,114,262,114,273,114,294,114,305,110],"tbody",{},[116,134,118,135,118,139,118,142,118,144,114],{},[136,137,138],"td",{},"Workspace support",[136,140,141],{},"✔️",[136,143,141],{},[136,145,141],{},[116,147,118,148,118,153,118,156,118,158,114],{},[136,149,150,151],{},"Isolated ",[43,152,83],{},[136,154,155],{},"✔️ - The default",[136,157,141],{},[136,159,141],{},[116,161,118,162,118,167,118,169,118,171,114],{},[136,163,164,165],{},"Hoisted ",[43,166,83],{},[136,168,141],{},[136,170,141],{},[136,172,155],{},[116,174,118,175,118,178,118,180,118,183,114],{},[136,176,177],{},"Auto installing peers",[136,179,141],{},[136,181,182],{},"❌",[136,184,141],{},[116,186,118,187,118,190,118,192,118,194,114],{},[136,188,189],{},"Plug'n'Play",[136,191,141],{},[136,193,155],{},[136,195,182],{},[116,197,118,198,118,201,118,203,118,205,114],{},[136,199,200],{},"Zero-Installs",[136,202,182],{},[136,204,141],{},[136,206,182],{},[116,208,118,209,118,212,118,214,118,216,114],{},[136,210,211],{},"Patching dependencies",[136,213,141],{},[136,215,141],{},[136,217,182],{},[116,219,118,220,118,223,118,225,118,227,114],{},[136,221,222],{},"Managing Node.js versions",[136,224,141],{},[136,226,182],{},[136,228,182],{},[116,230,118,231,118,234,118,240,118,245,114],{},[136,232,233],{},"Has a lockfile",[136,235,236,237],{},"✔️ - ",[43,238,239],{},"pnpm-lock.yaml",[136,241,236,242],{},[43,243,244],{},"yarn.lock",[136,246,236,247],{},[43,248,249],{},"package-lock.json",[116,251,118,252,118,255,118,257,118,260,114],{},[136,253,254],{},"Overrides support",[136,256,141],{},[136,258,259],{},"✔️ - Via resolutions",[136,261,141],{},[116,263,118,264,118,267,118,269,118,271,114],{},[136,265,266],{},"Content-addressable storage",[136,268,141],{},[136,270,182],{},[136,272,182],{},[116,274,118,275,118,278,118,284,118,289,114],{},[136,276,277],{},"Dynamic package execution",[136,279,280,281],{},"✔️ - Via ",[43,282,283],{},"pnpm dlx",[136,285,280,286],{},[43,287,288],{},"yarn dlx",[136,290,280,291],{},[43,292,293],{},"npx",[116,295,118,296,118,299,118,301,118,303,114],{},[136,297,298],{},"Side-effects cache",[136,300,141],{},[136,302,182],{},[136,304,182],{},[116,306,118,307,118,310,118,315,118,318,114],{},[136,308,309],{},"Listing licenses",[136,311,280,312],{},[43,313,314],{},"pnpm licenses list",[136,316,317],{},"✔️ - Via a plugin",[136,319,182],{},"\n  ",[16,322,323],{},"以上 3 個都是主流的 Node Package Manager，以現今環境來說，pnpm 是目前最推薦的套件管理工具。",[11,325,327],{"id":326},"如何安裝-pnpm","如何安裝 pnpm",[16,329,330],{},"最簡單的方式，你可以透過 npm 來全域安裝 pnpm：",[36,332,334],{"className":38,"code":333,"language":40,"meta":41,"style":41},"npm install -g pnpm\n",[43,335,336],{"__ignoreMap":41},[46,337,338,340,344,347],{"class":48,"line":49},[46,339,53],{"class":52},[46,341,343],{"class":342},"s_sjI"," install",[46,345,346],{"class":56}," -g",[46,348,349],{"class":342}," pnpm\n",[16,351,352],{},"這樣就完成了，你可以透過以下指令來確認 pnpm 是否已經安裝：",[36,354,356],{"className":38,"code":355,"language":40,"meta":41,"style":41},"pnpm -v\n",[43,357,358],{"__ignoreMap":41},[46,359,360,362],{"class":48,"line":49},[46,361,95],{"class":52},[46,363,57],{"class":56},[11,365,366],{"id":366},"常用指令列表",[108,368,320,369,320,383],{},[112,370,110,371,320],{},[116,372,114,373,114,376,114,378,114,380,110],{},[120,374,375],{},"作用",[120,377,53],{},[120,379,89],{},[120,381,382],{},"pnpm👍",[131,384,110,385,110,403,110,417,110,431,110,445,110,459,110,473,110,487,110,501,110,515,110,529,110,543,110,557,320],{},[116,386,114,387,114,394,114,397,114,400,110],{},[136,388,389,390,393],{},"安裝 package.json",[391,392],"br",{},"的所有套件",[136,395,396],{},"npm install",[136,398,399],{},"yarn install",[136,401,402],{},"pnpm install",[116,404,114,405,114,408,114,411,114,414,110],{},[136,406,407],{},"移除套件",[136,409,410],{},"npm uninstall xxx",[136,412,413],{},"yarn remove xxx",[136,415,416],{},"pnpm remove xxx",[116,418,114,419,114,422,114,425,114,428,110],{},[136,420,421],{},"移除套件的簡寫",[136,423,424],{},"npm rm xxx",[136,426,427],{},"yarn rm xxx",[136,429,430],{},"pnpm rm xxx",[116,432,114,433,114,436,114,439,114,442,110],{},[136,434,435],{},"全域安裝套件",[136,437,438],{},"npm i xxx -g",[136,440,441],{},"yarn global add xxx",[136,443,444],{},"pnpm add -g xxx",[116,446,114,447,114,450,114,453,114,456,110],{},[136,448,449],{},"安裝套件（開發跟生產階段都要用）",[136,451,452],{},"npm i xxx",[136,454,455],{},"yarn add xxx",[136,457,458],{},"pnpm add xxx",[116,460,114,461,114,464,114,467,114,470,110],{},[136,462,463],{},"安裝套件（僅開發階段使用）",[136,465,466],{},"npm i xxx -D",[136,468,469],{},"yarn add -D xxx",[136,471,472],{},"pnpm add -D xxx",[116,474,114,475,114,478,114,481,114,484,110],{},[136,476,477],{},"更新套件",[136,479,480],{},"npm update",[136,482,483],{},"yarn upgrade",[136,485,486],{},"pnpm update",[116,488,114,489,114,492,114,495,114,498,110],{},[136,490,491],{},"全域更新套件",[136,493,494],{},"npm update -g",[136,496,497],{},"yarn global upgrade",[136,499,500],{},"pnpm update -g",[116,502,114,503,114,506,114,509,114,512,110],{},[136,504,505],{},"執行 script",[136,507,508],{},"npm run xxx",[136,510,511],{},"yarn run xxx",[136,513,514],{},"pnpm run xxx",[116,516,114,517,114,520,114,523,114,526,110],{},[136,518,519],{},"清除快取",[136,521,522],{},"npm cache clean",[136,524,525],{},"yarn cache clean",[136,527,528],{},"pnpm store prune",[116,530,114,531,114,534,114,537,114,540,110],{},[136,532,533],{},"動態執行套件",[136,535,536],{},"npx xxx",[136,538,539],{},"yarn dlx xxx",[136,541,542],{},"pnpm dlx xxx",[116,544,114,545,114,548,114,551,114,554,110],{},[136,546,547],{},"查看全域安裝的套件",[136,549,550],{},"npm list -g --depth 0",[136,552,553],{},"yarn global list",[136,555,556],{},"pnpm list -g",[116,558,114,559,114,562,114,565,114,568,110],{},[136,560,561],{},"更新 package manager 自身版本",[136,563,564],{},"npm install -g npm",[136,566,567],{},"yarn set version latest",[136,569,570],{},"pnpm self-update",[572,573,574],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":41,"searchDepth":576,"depth":576,"links":577},3,[578,580,583,584],{"id":13,"depth":579,"text":14},2,{"id":63,"depth":579,"text":64,"children":581},[582],{"id":106,"depth":576,"text":106},{"id":326,"depth":579,"text":327},{"id":366,"depth":579,"text":366},"Node.js","2024-10-15","使用 JS 開發專案時，我們經常需要安裝第三方套件來擴充功能，使用 Package Manager 可以讓我們更方便的管理套件版本並確保相容性。",false,"md",null,{},true,"\u002Fblog\u002Fnodejs\u002Fpackage-manager",{"title":5,"description":587},"blog\u002Fnodejs\u002Fpackage-manager\u002Findex",[585,95],"qwPKGntqxUEqf_Llx0v21rFNu9uNZz5BLHItKxn4RFA",1780512500707]