npm 與 package.json 快速入門教程

轉自：https://blog.csdn.net/u011240877/article/details/76582670

npm 是前端開發普遍使用的包管理工具，以前使用 Weex 時看了阮一峯前輩的文章瞭解了一些，此次結合官方文章總結一下，加深下理解吧！

1. 什麼是 npm？
官方文檔中對它的介紹是：

npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you’re sharing.

即： npm 是一個包管理器，它讓 JavaScript 開發者分享、複用代碼更方便（有點 maven 的感受哈）。

在程序開發中咱們經常須要依賴別人提供的框架，寫 JS 也不例外。這些能夠重複的框架代碼被稱做包（package）或者模塊（module），一個包能夠是一個文件夾裏放着幾個文件，同時有一個叫作 package.json 的文件。

一個網站裏一般有幾十甚至上百個 package，分散在各處，一般會將這些包按照各自的功能進行劃分（相似咱們安卓開發中的劃分子模塊），可是若是重複造一些輪子，不如上傳到一個公共平臺，讓更多的人一塊兒使用、參與這個特定功能的模塊。

而 npm 的做用就是讓咱們發佈、下載一些 JS 輪子更加方便。
咱們能夠去官方網站 https://www.npmjs.com/ 瀏覽、搜索想要的輪子，也能夠直接在命令行中 search 一下意中輪。
使用 npm 後咱們能夠很是方便地查看依賴的輪子是否有更新、是否須要下載新版本。

如今咱們知道 npm 是幹什麼的了。當人們提及 「npm」 時，可能在說三個東西：

•     一個網站，就是前面提到用於搜索 JS 模塊的網站：https://www.npmjs.com/
•     一個倉庫，保存着人們分享的 JS 模塊的大數據庫
•     命令行裏的客戶端，開發者使用它來管理、安裝、發佈模塊

只要開發者發佈某個模塊到倉庫中，其餘人就能夠從 npm 網站或者命令行中下載、使用它了！

 

2. 安裝 npm
npm 是依附於 node.js 的，咱們能夠去它的官網 https://nodejs.org/en/download/ 下載安裝 node.js。
下載好 node.js, npm 也就有了，使用 npm -v 查看安裝的 npm 版本：

zhangshixin$ node -v
v6.10.0

 

3. 更新 npm
npm 更新地可比 node 勤快多了，所以你下載的 node 附帶的 npm 版本可能不是最新的，你可使用以下命令下載最新 npm:

npm install npm@latest -g

其中 install 不用介紹了，就是安裝，後面的 npm@latest 就是 <packageName>@<version> 的格式，咱們在下載其餘模塊時也是這個格式。-g 表明全局安裝。

 

4. package.json 文件
    package.json 文件很是重要，所以須要單獨一小節介紹。
管理本地安裝 npm 包的最好方式就是建立 package.json 文件。
一個 package.json 文件能夠有如下幾點做用：

•     做爲一個描述文件，描述了你的項目依賴哪些包
•     容許咱們使用 「語義化版本規則」（後面介紹）指明你項目依賴包的版本
•     讓你的構建更好地與其餘開發者分享，便於重複使用

4.1 package.json 如何建立
使用 npm init 便可在當前目錄建立一個 package.json 文件：

 

4.2 package.json 的內容
package.json 文件至少要有兩部份內容：

•     「name」

        所有小寫，沒有空格，可使用下劃線或者橫線

•     「version」

        x.x.x 的格式
        符合「語義化版本規則」

好比：

{
  "name": "shixinzhang-demo-package",
  "version": "1.0.0"
}

 

其餘內容：
    description：描述信息，有助於搜索
    main: 入口文件，通常都是 index.js
    scripts：支持的腳本，默認是一個空的 test
    keywords：關鍵字，有助於在人們使用 npm search 搜索時發現你的項目
    author：做者信息
    license：默認是 MIT
    bugs：當前項目的一些錯誤信息，若是有的話

咱們能夠爲 init 命令設置一些默認值，好比：

> npm set init.author.email "shixinzhang2016@gmail.com"
> npm set init.author.name "shixinzhang"
> npm set init.license "MIT"

    注意：
    若是 package.json 中沒有 description 信息，npm 使用項目中的 README.md 的第一行做爲描述信息。這個描述信息有助於別人搜索你的項目，所以建議好好寫 description 信息。

4.3 指定依賴的包
咱們須要在 package.json 文件中指定項目依賴的包，這樣別人在拿到這個項目時纔可使用 npm install 下載。
包有兩種依賴方式：

•     dependencies：在生產環境中須要用到的依賴
•     devDependencies：在開發、測試環境中用到的依賴

舉個例子：

{
    "name": "my-weex-demo",
    "version": "1.0.0",
    "description": "a weex project",
    "main": "index.js",
    "scripts": {
        "build": "weex-builder src dist",
        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
        "dev": "weex-builder src dist -w",
        "serve": "serve -p 8080"
    },
    "keywords": [
        "weex"
    ],
    "author": "fkysly@gmail.com",
    "license": "MIT",
    "devDependencies": {
        "babel-core": "^6.14.0",
        "babel-loader": "^6.2.5",
        "babel-preset-es2015": "^6.18.0",
        "vue-loader": "^10.0.2",
        "eslint": "^3.5.0",
        "serve": "^1.4.0",
        "webpack": "^1.13.2",
        "weex-loader": "^0.3.3",
        "weex-builder": "^0.2.6"
    },
    "dependencies": {
        "weex-html5": "^0.3.2",
        "weex-components": "*"
    }
}

View Code

 

5. Semantic versioning（語義化版本規則）
https://docs.npmjs.com/getting-started/semantic-versioning

dependencies 的內容，以 "weex-html5": "^0.3.2" 爲例，咱們知道 key 是依賴的包名稱，value 是這個包的版本。那版本前面的 ^ 或者版本直接是一個 * 是什麼意思呢？
這就是 npm 的 「Semantic versioning」，簡稱」Semver」，中文含義即「語義化版本規則」。
在安卓開發中咱們有過這樣的經驗：有時候依賴的包升級後大改版，以前提供的接口不見了，這對使用者的項目可能形成極大的影響。
所以咱們在聲明對某個包的依賴時須要指明是否容許 update 到新版本，什麼狀況下容許更新。
這就須要先了解 npm 包提供者應該注意的版本號規範。

若是一個項目打算與別人分享，應該從 1.0.0 版本開始。之後要升級版本應該遵循如下標準：

•     補丁版本：解決了 Bug 或者一些較小的更改，增長最後一位數字，好比 1.0.1
•     小版本：增長了新特性，同時不會影響以前的版本，增長中間一位數字，好比 1.1.0
•     大版本：大改版，沒法兼容以前的，增長第一位數字，好比 2.0.0

瞭解了提供者的版本規範後， npm 包使用者就能夠針對本身的須要填寫依賴包的版本規則。
做爲使用者，咱們能夠在 package.json 文件中寫明咱們能夠接受這個包的更新程度（假設當前依賴的是 1.0.4 版本）：
    若是隻打算接受補丁版本的更新（也就是最後一位的改變），就能夠這麼寫：

•         1.0
•         1.0.x
•         ~1.0.4

    若是接受小版本的更新（第二位的改變），就能夠這麼寫：

•         1
•         1.x
•         ^1.0.4

    若是能夠接受大版本的更新（天然接受小版本和補丁版本的改變），就能夠這麼寫：

•         *
•         x

小結一下：總共三種版本變化類型，接受依賴包哪一種類型的更新，就把版本號準確寫到前一位。

安裝 package
使用 npm 安裝 package 有兩種方式：本地（當前項目路徑）安裝 或者 全局安裝。
你選擇哪一種安裝方式取決於你將如何使用這個包：

•     若是你只是想在當前項目裏用 require() 加載使用，那你能夠安裝到本地

        npm install 默認就是安裝到本地的

•     若是你想要在命令行裏直接使用，好比 grunt CLI，就須要安裝到全局了

若是在你的項目裏有 package.json 文件，運行 npm install 後它會查找文件中列出的依賴包，而後下載符合語義化版本規則的版本。
npm install 默認會安裝 package.json 中 dependencies 和 devDependencies 裏的全部模塊。
若是想只安裝 dependencies 中的內容，可使用 --production 字段：

npm install --production

6. 本地安裝 package

npm 使用下面的命令下載一個包：

npm install <package_name>

後面就是要安裝包的名稱。這個命令會在當前目錄建立一個 node_modules 目錄，而後下載咱們指定的包到這個目錄中。