React package.json詳解

概述:javascript

每一個項目的根目錄下面,通常都有一個package.json文件,定義了這個項目所須要的各類模塊,以及項目的配置信息(好比名稱、版本、許可證等元數據)。npm install命令根據這個配置文件,自動下載所需的模塊,也就是配置項目所需的運行和開發環境。css

下面是一個最簡單的package.json文件,只定義兩項元數據:項目名稱和項目版本。html

  {
       "name" : "xxx",
        version" : "0.0.0",
  }

上面代碼說明,package.json文件內部就是一個JSON對象,該對象的每個成員就是當前項目的一項設置。好比name就是項目名稱,version是版本(遵照「大版本.次要版本.小版本」的格式)。java

下面是一個更完整的package.json文件。node

{
    "name": "Hello World",
    "version": "0.0.1",
    "author": "張三",
    "description": "第一個node.js程序",
    "keywords":["node.js","javascript"],
    "repository": {
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"MIT",
    "engines": {"node": "0.10.x"},
    "bugs":{"url":"http://path/to/bug","email":"b***@example.com"},
    "contributors":[{"name":"李四","email":"l***@example.com"}],
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "latest",
        "mongoose": "~3.8.3",
        "handlebars-runtime": "~1.0.12",
        "express3-handlebars": "~0.5.0",
        "MD5": "~1.2.0"
    },
    "devDependencies": {
        "bower": "~1.2.8",
        "grunt": "~0.4.1",
        "grunt-contrib-concat": "~0.3.0",
        "grunt-contrib-jshint": "~0.7.2",
        "grunt-contrib-uglify": "~0.2.7",
        "grunt-contrib-clean": "~0.5.0",
        "browserify": "2.36.1",
        "grunt-browserify": "~1.3.0",
    }
}

下面詳細解釋package.json文件的各個字段。git

scripts字段

scripts指定了運行腳本命令的npm命令行縮寫,好比start指定了運行npm run start時,所要執行的命令。express

下面的設置指定了npm run preinstallnpm run postinstallnpm run startnpm run test時,所要執行的命令。npm

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

dependencies字段,devDependencies字段

dependencies字段指定了項目運行所依賴的模塊,devDependencies指定項目開發所須要的模塊。json

它們都指向一個對象。該對象的各個成員,分別由模塊名和對應的版本要求組成,表示依賴的模塊及其版本範圍。promise

{
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  }
}

對應的版本能夠加上各類限定,主要有如下幾種:

  • 指定版本:好比1.2.2,遵循「大版本.次要版本.小版本」的格式規定,安裝時只安裝指定版本。
  • 波浪號(tilde)+指定版本:好比~1.2.2,表示安裝1.2.x的最新版本(不低於1.2.2),可是不安裝1.3.x,也就是說安裝時不改變大版本號和次要版本號。
  • **號(caret)+指定版本:好比ˆ1.2.2,表示安裝1.x.x的最新版本(不低於1.2.2),可是不安裝2.x.x,也就是說安裝時不改變大版本號。須要注意的是,若是大版本號爲0,則**號的行爲與波浪號相同,這是由於此時處於開發階段,即便是次要版本號變更,也可能帶來程序的不兼容。
  • latest:安裝最新版本。

package.json文件能夠手工編寫,也能夠使用npm init命令自動生成。

$ npm init

這個命令採用互動方式,要求用戶回答一些問題,而後在當前目錄生成一個基本的package.json文件。全部問題之中,只有項目名稱(name)和項目版本(version)是必填的,其餘都是選填的。

有了package.json文件,直接使用npm install命令,就會在當前目錄中安裝所須要的模塊。

$ npm install

若是一個模塊不在package.json文件之中,能夠單獨安裝這個模塊,並使用相應的參數,將其寫入package.json文件之中。

$ npm install express --save
$ npm install express --save-dev

上面代碼表示單獨安裝express模塊,--save參數表示將該模塊寫入dependencies屬性,--save-dev表示將該模塊寫入devDependencies屬性。

peerDependencies

有時,你的項目和所依賴的模塊,都會同時依賴另外一個模塊,可是所依賴的版本不同。好比,你的項目依賴A模塊和B模塊的1.0版,而A模塊自己又依賴B模塊的2.0版。

大多數狀況下,這不構成問題,B模塊的兩個版本能夠並存,同時運行。可是,有一種狀況,會出現問題,就是這種依賴關係將暴露給用戶。

最典型的場景就是插件,好比A模塊是B模塊的插件。用戶安裝的B模塊是1.0版本,可是A插件只能和2.0版本的B模塊一塊兒使用。這時,用戶要是將1.0版本的B的實例傳給A,就會出現問題。所以,須要一種機制,在模板安裝的時候提醒用戶,若是A和B一塊兒安裝,那麼B必須是2.0模塊。

peerDependencies字段,就是用來供插件指定其所須要的主工具的版本。

{
  "name": "chai-as-promised",
  "peerDependencies": {
    "chai": "1.x"
  }
}

上面代碼指定,安裝chai-as-promised模塊時,主程序chai必須一塊兒安裝,並且chai的版本必須是1.x。若是你的項目指定的依賴是chai的2.0版本,就會報錯。

注意,從npm 3.0版開始,peerDependencies再也不會默認安裝了。

bin字段

bin項用來指定各個內部命令對應的可執行文件的位置。

"bin": {
  "someTool": "./bin/someTool.js"
}

上面代碼指定,someTool 命令對應的可執行文件爲 bin 子目錄下的 someTool.js。Npm會尋找這個文件,在node_modules/.bin/目錄下創建符號連接。在上面的例子中,someTool.js會創建符號連接npm_modules/.bin/someTool。因爲node_modules/.bin/目錄會在運行時加入系統的PATH變量,所以在運行npm時,就能夠不帶路徑,直接經過命令來調用這些腳本。

所以,像下面這樣的寫法能夠採用簡寫。

scripts: {  
  start: './node_modules/someTool/someTool.js build'
}

// 簡寫爲

scripts: {  
  start: 'someTool build'
}

全部node_modules/.bin/目錄下的命令,均可以用npm run [命令]的格式運行。在命令行下,鍵入npm run,而後按tab鍵,就會顯示全部能夠使用的命令。

main字段

main字段指定了加載該模塊時的入門文件,默認是模塊根目錄下面的index.js

config字段

config字段用於向環境變量輸出值。

下面是一個package.json文件。

{
  "name" : "foo",
  "config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js" }
}

而後,在server.js腳本就能夠引用config字段的值。

http.createServer(...).listen(process.env.npm_package_config_port)

用戶能夠改變這個值。

$ npm config set foo:port 80

其餘

browser字段

browser指定該模板供瀏覽器使用的版本。Browserify這樣的瀏覽器打包工具,經過它就知道該打包那個文件。

"browser": {
  "tipso": "./node_modules/tipso/src/tipso.js"
},

engines字段

engines指明瞭該項目所須要的node.js版本。

man字段

man用來指定當前模塊的man文檔的位置。

"man" :[ "./doc/calc.1" ]

preferGlobal字段

preferGlobal的值是布爾值,表示當用戶不將該模塊安裝爲全局模塊時(即不用—global參數),要不要顯示警告,表示該模塊的本意就是安裝爲全局模塊。

style字段

style指定供瀏覽器使用時,樣式文件所在的位置。樣式文件打包工具parcelify,經過它知道樣式文件的打包位置。

"style": [
  "./node_modules/tipso/src/tipso.css"
]
相關文章
相關標籤/搜索