一開始使用npm安裝套件的紀錄

以安裝 tailwindcss 為例
npm
https://docs.npmjs.com/getting-started

$ npm init  # 初始化並建立一個全新的專案

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and    
save it as a dependency in the package.json file.

Press ^C at any time to quit.
# 可輸入的資訊: 
package name: (tailwindcss-npm)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: anki
license: (ISC)
About to write to G:\TailwindCSS-npm\package.json:

{
  "name": "tailwindcss-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"      
  },
  "author": "anki",
  "license": "ISC"
}


Is this OK? (yes)

package.json

package.json 專案的基本資訊如專案的名稱、版本、描述、作者等等，或是想要使用的指令、專案所需要的相依套件。

TailwindCSS-npm
╰── package.json   # 專案結構

# package.json

{
  "name": "tailwindcss-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "anki",
  "license": "ISC"
}

使用 npm run test 測試印出 package.json 的 scripts

$ npm run test 
> tailwindcss-npm@1.0.0 test
> echo "Error: no test specified" && exit 1

"Error: no test specified" 

install tailwindcss

$ npm i tailwindcss

added 82 packages, and audited 83 packages in 6s

14 packages are looking for funding                     "      
  run `npm fund` for details

found 0 vulnerabilities

安裝後的專案結構:

TailwindCSS-npm
│── node_modules
	╰── # 76 folders & files
│── package-lock.json 
╰── package.json  

package.json 多了 dependencies: { "tailwindcss": "^3.3.3"}

{
  "name": "tailwindcss-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^3.3.3"
  }

}

node_modules

放置專案所需的的相依套件，比如 安裝的 tailwindcss 可以直接使用的原因就是來自於 node_modules 裡的 tailwindcss

.bin
.package-lock.json
@alloc
@jridgewell
@nodelib
anymatch
any-promise
arg
balanced-match
binary-extensions
brace-expansion
braces
camelcase-css
chokidar
commander
concat-map
cssesc
didyoumean
dlv
fast-glob
fastq
fill-range
fs.realpath
function-bind
glob
glob-parent
has
inflight
inherits
is-binary-path
is-core-module
is-extglob
is-glob
is-number
jiti
lilconfig
lines-and-columns
list.txt
listdir.bat
merge2
micromatch
minimatch
mz
nanoid
normalize-path
object-assign
object-hash
once
path-is-absolute
path-parse
picocolors
picomatch
pify
pirates
postcss
postcss-import
postcss-js
postcss-load-config
postcss-nested
postcss-selector-parser
postcss-value-parser
queue-microtask
read-cache
readdirp
resolve
reusify
run-parallel
source-map-js
sucrase
supports-preserve-symlinks-flag
tailwindcss
thenify
thenify-all
to-regex-range
ts-interface-checker
util-deprecate
wrappy
yaml

移除 dependencies

$ npm uninstall tailwindcss

移除 tailwindcss 之後的 node_modules 檔案結構:

TailwindCSS-npm
│── node_modules
│   │── .bin
│   │── .package-lock.json
│   │── @alloc
│   │── @jridgewell
│   ╰── @nodelib
│── package-lock.json 
╰── package.json  

移除 tailwindcss 之後的 package.json 檔案結構:

{
  "name": "tailwindcss-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

node_modules

node_modules 移除，使用 npm install 就根據 package.json 裡的 dependencies 寫的相依套件資訊來重新安裝所有需要的套件，所以在將專案傳給別人的時候，不用連同裝了很多套件的 node_nodules 一起給，也因為 node_module 的檔案容量不小，在上傳到像是 GitHub, Bitbucket 的時候，會透過 .gitignore 中設定，使 node_modules 不會一起上傳。

參考資源

1. Hiskio - 布魯斯的 Tailwind CSS 開發秘技 課程
2. .gitignore file - ignoring files in Git | Atlassian Git Tutorial