package.json

Node為前端工程化，模塊化注入了新鮮的血液，而npm是其中關(guān)鍵的一環(huán)。對于剛接觸這些新穎概念的我，此文作為學(xué)習(xí)筆記加強記憶幫助使用。

目前最新版本的Node環(huán)境已經(jīng)集成了npm，下載Node便可使用了。

package.json：是一個用于包的依賴管理文件

package.json可以通過npm init命令生成。

執(zhí)行命令后，它會像用戶提問一系列問題，用于初始配置文件，當(dāng)然即使你跳過此步驟，后續(xù)也可以繼續(xù)修改。

愈要跳過此步驟：npm init -y

鍵入yes確認(rèn)，生成json文件。

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

在package.json中，有一些屬性是必須寫入的。即最少配置項

  • name

    • 全部為小寫字母
    • 一個單詞，無空格
    • 允許半角破折號和下劃線

  • version

你可以通過set命令來提前設(shè)置好一些配置項。如：

npm set init.author.email "wombat@npmjs.com"
npm set init.author.name "ag_dubs"
npm set init.license "MIT"

Package.json 屬性說明

  • name - 包名
  • version - 包的版本號
  • description - 包的描述
  • **homepage - 包的官網(wǎng) url **
  • author - 包的作者姓名
  • contributors - 包的其他貢獻者姓名
  • dependencies - 依賴包列表。如果依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下
  • repository - 包代碼存放的地方的類型，可以是 git 或 svn，git 可在 Github 上
  • main - main 字段指定了程序的主入口文件，require('moduleName') 就會加載這個文件。這個字段的默認(rèn)值是模塊根目錄下面的 index.js
  • keywords - 關(guān)鍵字(便于檢索)

接下來演示一些基本用法。

在前端上古時期，沒有包、模塊等概念的時候，要在瀏覽器中使用jQuery最常見的做法就是，找到官網(wǎng)——復(fù)制or下載源碼——貼入src這樣的操作了。

那么，在node中，我們?nèi)绾问褂胘Query？

首先cd到項目目錄，生成package.json文件，隨后觀察這個json文件，注意發(fā)現(xiàn)有什么改變。

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

CLI中鍵入npm install jquery
執(zhí)行這條命令的時候，終端會鏈接到npm服務(wù)器，尋找是否存在這個名字的包。如果不存在，會返回error。

正確輸入package name后，自動下載到當(dāng)前目錄下的node_modules目錄中。

所有通過npm安裝的包都會存放在當(dāng)前項目node_modules目錄下。

又安裝了一個包

有一些包和工具必須全局安裝（比如eslint和gulp）才能方便使用，這里要用到全局安裝命令。

npm install -global <package name>
npm install -g <package name>

這樣就會將包安裝在根目錄下。

那么現(xiàn)在，想要在HTML頁面中引入jQuery，我們可以：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script>
        console.log($(document));
    </script>
</body>
</html>

瀏覽器打開：


那么問題來了，目錄下文件那么多，我們怎么知道是/jquery/dist/jquery.js呢？
這些都寫在了包自帶的package.json中。

main屬性就指定了這個包的入口文件，通俗的說，如果你想用它，從“這里”開始。

好了，現(xiàn)在假設(shè)你離職了，后續(xù)的人需要接管你的代碼，那么他怎么知道你這個項目依賴什么包呢？靠的也是package.json。

現(xiàn)在回到install之前的package.json文件中，發(fā)現(xiàn)到了什么變化嗎？

{
  "name": "studynpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "vue": "^2.5.17"
  }
}

多了一個屬性，dependencies，翻譯過來：依賴，顧名思義，這個屬性就是管理你當(dāng)前包的依賴的。
并且詳細(xì)到，依賴的包的版本號也會紀(jì)錄。

現(xiàn)在，我們手動刪除node_modules目錄。


現(xiàn)在想回到之前的開發(fā)環(huán)境怎么辦？

既然有package.json，直接npm insatll。

又回來了，這樣，別人需要知道你的依賴，直接發(fā)package.json文件給他就好了。

怎么知道一個包是否存在呢？
進入npm官網(wǎng)查詢。


或者使用npm search

npm search

npm search命令用于搜索npm倉庫，它后面可以跟字符串，也可以跟正則表達(dá)式。

以往的npm，將一個包保存入dependencies屬性需要命令：npm install <package name> --save，也就是說，你要明確指定save in dependencies，它才會將此包作為依賴放入dependencies屬性內(nèi)。

新版本npm中，通過npm install安裝的包都會自動添加進入dependencies，這是默認(rèn)的。

如何更新依賴？

npm update

// 升級當(dāng)前項目的指定模塊
npm update [package name]

//升級全局安裝的模塊
npm update -global [package name]

它會先到遠(yuǎn)程倉庫查詢最新版本，然后查詢本地版本。如果本地版本不存在，或者遠(yuǎn)程版本較新，就會安裝。

使用-s或--save參數(shù)，可以在安裝的時候更新package.json里面模塊的版本號。

// 更新之前的package.json
dependencies: {
  package1: "^1.1.1"
}

// 更新之后的package.json
dependencies: {
  package1: "^1.2.2"
}

如果需要指定安裝版本，可以在package name后@版本號。

npm install jquery@x.y.z

當(dāng)然，更新之后，dependencies內(nèi)的版本號也會改變。

如何卸載一個包呢？

本地卸載：npm uninstall <package name>

同時，package.json的dependencies屬性也會刪除此依賴。當(dāng)然，也可以手動刪除它。
npm uninstall --save vue

全局卸載：npm uninstall -g <package name>

有時候，當(dāng)我們開發(fā)一個項目時，一些包只是作為開發(fā)依賴，并不是項目必須的，比如一些測試工具，不會在生產(chǎn)環(huán)境下運行。

那么就涉及到devDependencies項了。
devDependencies指定項目開發(fā)所需要的模塊。

{
  "name": "studynpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.19.0"
  }
}

package.json —— bin字段
bin字段用來指定各個內(nèi)部命令對應(yīng)的可執(zhí)行文件的位置。

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

上面代碼指定，start命令對應(yīng)的可執(zhí)行文件為bin字目錄下的start.js文件，node會尋找這個文件

一些常用命令

npm update <package name>：更新node模塊

npm rebuild <package name>：用于更改包內(nèi)容后進行重建

npm view <package name> dependencies：查看包的依賴關(guān)系

npm view <package name> repository.url：查看包的源文件地址

npm view <package name> engines：查看包所依賴的Node的版本

npm outdated：檢查包是否已經(jīng)過時，此命令會列出所有已經(jīng)過時的包，可以及時進行包的更新

npm update moduleName：更新node模塊

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文鏈接：http://www.mujiang.info/translation/npmjs/files/pack...
    R_X閱讀 1,120評論 0贊 1
  • npm指令 通過npm指令，允許用戶從npm服務(wù)器上下載第三方包、下載并安裝別人編寫的命令行程序到本地使用，也可自...
    baybay_learn閱讀 4,895評論 0贊 2
  • 1.概述 每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目...
    YINdevelop閱讀 1,486評論 0贊 2
  • 當(dāng)我們創(chuàng)建一個node項目，意味著創(chuàng)建一個module模塊，這個模塊的描述文件，叫package.json。 "n...
    淚滴在琴上閱讀 24,442評論 2贊 12
  • kettenreaktion閱讀 112評論 0贊 0

友情鏈接更多精彩內(nèi)容