npm 和package.json 檔案

標籤：自動   函數   部署   r.js   web   核心   衝突   version   require   

　　你可能還記得使用vue-cli 建立vue項目。當建立項目完成後，我們進入到項目目錄，啟動cmd命令視窗，輸入npm install，它就會安裝一堆東西(依賴)，然後再輸入npm run dev, 我們就可以看到網頁了，整個項目啟動成功。這就是npm 最強大的地方，只使用簡單的兩個命令，我們就能夠快速地在本地啟動一個項目。

　　npm install 就是安裝模組，npm run dev  就是執行npm script中的命令。當我們執行npm命令的時候，它到哪裡去找，這就要說到每個node項目中都有的核心檔案package.json 檔案。

　　項目開始時，我們就要建立這個檔案。假設我們要建立一個node 項目，我們會建立一個檔案夾命名node， 這時我們就要建立package.json檔案。進入node 檔案夾，你可以手動建立，就和建立一個txt檔案一樣，但我們一般都會使用命令建立，開啟cmd 視窗，輸入npm init， 這時你要回答幾個問題，如name,version 等，輸入內容，一路斷行符號鍵，當你輸入yes的時候，package.json 建立成功，你的檔案夾中多了這個檔案。

　　其中有幾個欄位比較重要：

　　name 項目名稱， 你可能在項目中使用過 var express = require(‘express’), require 函數後面的參數，就是package.json 中的name欄位，所以這個name一定要簡短，且不能有大寫，這是規定。

　　version版本號碼：安裝一個模組的時候， 你可能指定過特定的版本號碼，npm install express @4.13.2, 版本號碼4.13.2 就是我們這裡的version。版本號碼有三個組成部分，4, 15, 3 .  4表示的是大版本，一般是重大升級。15： 表示的是小版本, 在大版本的基礎進行的小的更新，如某個功能廢棄了，新增了那個功能。3： 對該版本進行補丁，主要是版本bug的修複。

　　script： 我們在命令列中執行的所有命令都寫在這個地方，然後用 npm run 去執行這個命令。

　　項目初始完成後，我們就可以進行項目開發。在開發過程中我們都會用到一些第三方庫和 架構，尤其是node 開發, 因為它提供的API 有點底層. 如果想用第三方的東西，就要事先安裝。上面說到 安裝用的命令是npm install。 npm install express --save  --save 是什麼意思？--save表示，我們安裝模組的時候，同時把它寫到package.json 檔案中。這時開啟package.json 檔案，我們看到多了一個dependencies欄位，它包括了我們剛安裝的express. node中有些es6/es7 的文法不支援，我們使用的時候，就需要進行轉換。這時安裝babel. npm install babel-cli babel-preset-es2015 --save–dev  --save-dev 又是什麼，它也表示安裝依模組的時候，把它寫到package.json中，不過它寫入的不是dependencies, 而是devDependencies中。

　　devDependencies 和dependencies 有什麼區別？dependencies: 是項目運行時的依賴，就是程式上線後仍然需要依賴，比如express, 我們程式就是用express 寫的，如果沒有express, 我們的程式根本無法運行，更直白一點，dependencies 就是我們在程式開發的過程中手動require的模組。進行express 開發時,server.js中，都會寫  var express  = require(‘express’), 我們程式直接依賴，所以是dependencies. 

　　devDependencies, 開發依賴，就是我們在開發過程中需要的依賴。比如babel, 它只負責轉換es6+ 到es5， 轉換完成後，我們只要轉換後的代碼，上線的時候，直接把轉換後的代碼部署上線，不需要bebal.  這就是開發依賴，只在開發時候起作用， 上線不需要。其實就是我們在使用webpack開發時，它設定檔裡所有的依賴，都是開發依賴。

　　無論devDependencies還是dependencies中，安裝的模組版本號碼前面還有符號^, 其實這裡還有很多符號也可以無符號，符號主要是限定版本。

　　"express": "4.15.2" 版本號碼前面什麼符號都沒有，它表示固定版本，安裝版本時，只會安裝這個指定的版本。

　　"express": "~4.15.2"，版本號碼前面有符號~，它表示安裝4.15.x 的版本，只x>3 就可以。在這裡，我們express指定是4.15.2 版本，當我們npm install 安裝的時候，它可能在項目中安裝4.15.5或者4.15.6 版本。

　　"express": "^4.15.2" , 版本號碼前面有符號^, 它表示可以安裝4.x.x 的版本，只要中間的x  大於15就可以。

　　>=4.15.3  版本號碼前面有符號>=, 它安裝大於我們指定的版本，就可以。

　　有時還看到一個*， 表示安裝最新版本。

　　版本號碼一定要注意，因為有些架構和庫在進行版本升級的時候，向後相容性必較差，容易引起代碼衝突。但npm install 進行安裝的時候，它預設是^ 符號，如果不符合我們要求，我們可以對package.json 進行手動修改，如 把^號改成~, 或直接去掉符號， package.json檔案，只是一個檔案， 我們可以手動地進行任何修改。

　　最後再說一下package.json 中的scripts. 這個欄位主要用於運行命令。我們用es6 寫一個hello World項目體驗下。在node檔案夾中建立index.js 

import express from "express";let app = express();app.get(‘/‘, (req,res)=> {    res.send("hello World")})app.listen(8080)

　　由於node 不支援 import 命令，所以要把它轉成require 的形式，這要用到babel 命令: babel index.js –o server.js，由於babel-cli  是安裝到本地的，所以不能全域使用，那麼這個命令寫在什麼地方？就是寫在scripts 中，

　　在scripts中的命令，都要用npm run 命令名啟動。這時在命令列中輸入npm run build，可以看到目錄中多了一個server.js檔案，再在命令列中輸入node server, 就可以啟動伺服器。瀏覽器地址欄中輸入localhost:8080, 看到hello world.

　　這裡我們在命令列中輸入了兩次命令，其實可以把這兩個命令合并到 一個命令中，修改scripts 中的build 如下， 直接npm run build  就可以啟動伺服器。

"build": "babel index.js -o server.js && node server"  

　　npm 也可以做部分的任務自動化。

　　整個package.json檔案如下：

{  "name": "node",  "version": "1.0.0",  "description": "node project",  "main": "server.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "babel index.js -o server.js && node server"    },  "author": "",  "license": "ISC",  "dependencies": {    "express": "^4.15.2"  },  "devDependencies": {    "babel-cli": "^6.24.1",    "babel-preset-es2015": "^6.24.1"  }}

 

npm 和package.json 檔案