npm 相關筆記


Posted by yunanpan on 2020-07-01

此篇為記錄 [FE102] 前端必備:JavaScript 課程的筆記。
主要內容為(一)模組化的概念、(二)測試、(三)ES6 部分新語法。


npm 是什麼?

npm 全名為 Node Package Manager,主要是用來管理套件,通常安裝 Node.js 時就會一併自動安裝 npm。在開發網頁時,有些功能可能網路上就有人寫好並包裝成一組套件,符合需求便可下載,節省從頭製作功能的時間。

使用指令

npm init:會建立管理專案資訊的 package.json 檔案。
npm install <套件名稱> --save:安裝第三方套件。會新增 node_modules 資料夾和 package-lock.json 檔案,並把抓下來的套件放在 node_modules。在 package.json 的 dependencies 也可以看到成功安裝的套件名稱以及版本。
npm install <套件名稱> --save-dev:安裝第三方套件,但是寫進 package.json 的 devDependencies 裡,意指有開發的時候會用到的套件。
npm uninstall <套件名稱>:刪除套件。

因為 node_modules 裡有下載下來的套件和該套件依賴的套件,所以資料夾檔案會非常的大。如果在協同作業時,是不會將此檔案分享,而是利用 npm install 去查看 package.json 裡所用到的 dependencies 並下載。

npm scripts

可以將寫好的指令,寫在 package.json 下的 script 裡。之後直接用 npm 跑指令即可。

"scripts": {
    "start": "node index.js"
  },

之後直接以 npm run start 就等同於 node index.js


yarn

npm 外的另外一種選擇。(有繁體中文可看,但有些字還是簡體ㄎ)
如何安裝
yarn = npm install
yarn add <套件名稱> = npm install <套件名稱>
yarn run start = npm run start


參考:
npm 官網
NPM 套件管理工具常用指令
yarn 官網










Related Posts

iOS SwiftUI-5 Animation Complete監聽

iOS SwiftUI-5 Animation Complete監聽

Vue.js 學習旅程Mile 6 – 資料單向綁定篇:v-text & v-html

Vue.js 學習旅程Mile 6 – 資料單向綁定篇:v-text & v-html

當 React web app 遇上 Progressive web app

當 React web app 遇上 Progressive web app


Comments