npm、bundler、webpack、package.json what is what

• npm : "node package manager" 簡寫
  • 是 node.js 的套件管理工具
    • node: Node.js 是一個能夠在伺服器端運行 JavaScript 的「開放原始碼」；跨平台JavaScript 執行環境。
  • 用命令列操作
    • 可以下載各種模組、資源、工具...
    • "管理" 使用到的"資源"的工具
  • 會產生 package.json 檔，上面記錄下載的工具清單和一些供客制化的設定，例如可自訂指令、做什麼行動...
• bundler : 加工處理、集成、打包的工具
  • js / css / img / fonts... 不同素材資源，開發時需要不同編譯、處理工作、或產品化需要進行檔案優化等工作需求等
  • gulp 用流程管理的管理工具 / webpack 流程中加工管理、集成的管理工具 ...
    • 需在設定檔設定管理流程：e.g. webpack.config 是 webpack 的設定檔、 gulpfile.js 是 gulp 的設定檔

npm 名詞

• package.json 是專案設定檔，可以用來設定 dependency 會用到哪些 package
  • 專案用 dependency
  • 開發用 dev-dependency
  • 有 package.json，clone 別人專案回來時，可以用 npm install 直接安裝相依的 package 到 local 。
• npm init 初始化：建立一個 package.json。

• npm install <package> // 正常的安裝套件流程

  • 如果沒有指定 package 的話，會自動安裝 package.json 裡面的相依性.
  • npm install <package> --save : 增加/更新 package.json 這個 dependency。
  • npm install <package> --save-dev : 會寫入 dev-dependency 區。
  • g 屬性，有支援 npm install -g <package> 的 npm ，會把該 package 安裝在 global。

• npm run

  • package.json 裡面有 scripts 屬性。你可以在此定義要執行哪些指令，並賦予名稱。
  • 例如 "dev":"supervisor --extensions 'node,js,jsx' app.js"
  • npm run dev 即執行 "supervisor --extensions 'node,js,jsx' app.js"

e.g. package.json

{
   "name": "mypackage", /* 應用程式名稱 */
   "version": "0.7.0", /* 版本 */
   "description": "Sample package for CommonJS. This package demonstrates the required elements of a CommonJS package.", /* 描述 */
   "keywords": [ /* 關鍵字 */
       "package", 
       "example" 
   ],
   "maintainers": [ /* 授權 */
       {
           "name": "Bill Smith",
           "email": "[email protected]",
           "web": "http://www.example.com" 
       } 
   ],
   "contributors": [ /* 貢獻者 */
       {
           "name": "Mary Brown", 
           "email": "[email protected]",
           "web": "http://www.embedthis.com" 
       } 
   ],
   "bugs": {  /* 維護者 */
       "mail": "[email protected]",
       "web": "http://www.example.com/bugs" 
   },
   "licenses": [
       {
           "type": "GPLv2",
           "url": "http://www.example.org/licenses/gpl.html" 
       } 
   ], /* 許可 */
   "repositories": [  /* 版本儲存褲 */
       {
           "type": "git", 
           "url": "http://hg.example.com/mypackage.git" 
       } 
   ],
   "dependencies": {  /* 使用的套件 */
       "webkit": "1.2",
       "ssl": {
           "gnutls": ["1.0", "2.0"], 
           "openssl": "0.9.8" 
       } 
   }, 
   "implements": ["cjs-module-0.3", "cjs-jsgi-0.1"], /* 實現 */
   "os": ["linux", "macos", "win"], /* 可用系統 */
   "cpu": ["x86", "ppc", "x86_64"], /* 可用環境 */
   "engines": ["v8", "ejs", "node", "rhino"], /* 使用環境 */
   "scripts": { /* 執行腳本 */
       "install": "install.js",
       "uninstall": "uninstall.js",
       "build": "build.js",
       "test": "test.js" 
   }, 
   "directories": { /* 命名定義 */
       "lib": "src/lib", 
       "bin": "local/binaries", 
       "jars": "java" 
   } 
}