NPM你真的會嗎?(一)

clipboard.png

什麼是NPM

npm是什麼東東?npm其實是Node.js的包管理工具(package manager)。
爲啥我們需要一個包管理工具呢?因爲我們在Node.js上開發時,會用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個包,每次都根據名稱搜索一下官方網站,下載代碼,解壓,script 引入,非常繁瑣。於是一個集中管理的工具應運而生:大家都把自己開發的模塊打包後放到npm官網上,如果要使用,直接通過npm安裝就可以直接用,不用管代碼存在哪,應該從哪下載。
更重要的是,如果我們要使用模塊A,而模塊A又依賴於模塊B,模塊B又依賴於模塊X和模塊Y,npm可以根據依賴關係,把所有依賴的包都下載下來並管理起來。否則,靠我們自己手動管理,肯定既麻煩又容易出錯。

npm的歷史

在沒有npm的年代,你要去獲取一個模塊,或者一個框架你的方式是什麼?

  • 獲取->JQ
  • 獲取->Boottrap
  • 獲取->Underscore

jQuery官網下載
我們的GitHub

當然當時也是一個jQuery可以走天下的時代

我們程序員當然不能接受這種古老而且低效率的事情,我們需要更加高效更加合理的代碼管理方式。
想想其他語言

語言 包管理工具
Java maven
Python distribute、setuptools、distutils、easy_install、pip
PHP Composer

前端居然沒有!不能容忍!在這個時候有個人站了出來
Isaac Z. Schlueter GitHub 下面簡稱(Issac)

大致的實現思路

  • 找一個雲服務把所有的代碼都管理起來
  • 然後通知 jQuery、Bootstrap、等等這些框架的坐着作者使用 npm publish 把代碼提交到雲服務上,
  • 社區裏的其他人如果想使用這些代碼,就可以通過npm install 來下載這些代碼了。
  • 下載完的代碼出現在 node_modules 目錄裏,就可以通過require引入進行使用了。

後續發展

Isaaz 通知 jQuery 作者 John Resig,他會答應嗎?不一定這還是個未知數,但是還是要去做。
只有前端開發工程師人人都知道有這個東西了纔會認可它對不對。
那npm是怎麼迅速在前端社區火爆起來的呢?
npm 的發展是跟 Node.js 的發展相輔相成的。
Node.js 是由一個在德國工作的美國程序員 Ryan Dahl github地址 寫的。他寫了 Node.js,但是 Node.js 當時缺少一個包管理器,於是他和 Isaaz 一拍即合、,最終 Node.js內置了npm。
後來的事情大家都知道,Node.js 火了。

package.json

當我們在一個空文件 npm init 初始化的時候這個文件就誕生了,

我這裏找了express 的 package.json

{
  "name": "express", // 包名
  "description": "Fast, unopinionated, minimalist web framework", // 包的描述
  "version": "4.13.3", // 包的版本號
  "author": { // 包的作者姓名
    "name": "TJ Holowaychuk",
    "email": "[email protected]"
  },
  "contributors": [ // 包的其他貢獻者姓名
    {
      "name": "Aaron Heckmann",
      "email": "[email protected]"
    }
    // ...
  ],
  "license": "MIT", // 你應該爲你的模塊制定一個協議,讓用戶知道他們有何權限來使用你的模塊,以及使用該模塊有哪些限制。
  "repository": { // 包代碼存放的地方的類型,可以是 git 或 svn,git 可在 Github 上。
    "type": "git",
    "url": "git+https://github.com/strongloop/express.git"
  },
  "homepage": "http://expressjs.com/", // 包的官網 url
  "keywords": [ // 關鍵字
    "express",
    "framework",
    "sinatra",
    "web",
    "rest",
    "restful",
    "router",
    "app",
    "api"
  ],
  "dependencies": { // 依賴包列表。如果依賴包沒有安裝,npm 會自動將依賴包安裝在 node_module 目錄下
    "accepts": "~1.2.12",
    // ...
  },
  "devDependencies": { // 開發環境的依賴包
    "after": "0.8.1",
    // ...
  },
  "engines": { // node版本範圍
    "node": ">= 0.10.0"
  },
  "files": [
    "LICENSE",
    "History.md",
    "Readme.md",
    "index.js",
    "lib/"
  ],
  "scripts": { // 項目的生命週期個各個環節需要執行的命令。key是生命週期中的事件,value是要執行的命令。
    "test": "mocha --require test/support/env --reporter spec --bail --check-leaks test/ test/acceptance/",
    "test-ci": "istanbul cover node_modules/mocha/bin/_mocha --report lcovonly -- --require test/support/env --reporter spec --check-leaks test/ test/acceptance/",
    "test-cov": "istanbul cover node_modules/mocha/bin/_mocha -- --require test/support/env --reporter dot --check-leaks test/ test/acceptance/",
    "test-tap": "mocha --require test/support/env --reporter tap --check-leaks test/ test/acceptance/"
  },
  "gitHead": "ef7ad681b245fba023843ce94f6bcb8e275bbb8e",
  "bugs": {
    "url": "https://github.com/strongloop/express/issues"
  },
  "_id": "[email protected]",
  "_shasum": "ddb2f1fb4502bf33598d2b032b037960ca6c80a3",
  "_from": "express@*",
  "_npmVersion": "1.4.28",
  "_npmUser": {
    "name": "dougwilson",
    "email": "[email protected]"
  },
  "maintainers": [
    {
      "name": "tjholowaychuk",
      "email": "[email protected]"
    }
    // ...
  ],
  "dist": {
    "shasum": "ddb2f1fb4502bf33598d2b032b037960ca6c80a3",
    "tarball": "http://registry.npmjs.org/express/-/express-4.13.3.tgz"
  },
  "directories": {},
  "_resolved": "https://registry.npmjs.org/express/-/express-4.13.3.tgz",
  "readme": "ERROR: No README data found!"
}

那麼你下次如果有這個package.json 你就可以直接下載安裝這些依賴包。包文件就會出現在node_modules裏面。

經常使用的命令

全局安裝與本地安裝
很多朋友一開始並不知道 npm install -g 和不帶-g的區別,npm 的包安裝分爲本地安裝(local)、全局安裝(global)兩種

npm install express          # 本地安裝
npm install express -g       # 全局安裝

本地安裝
1、將安裝包放在./node_modules 下(運行 npm 命令時所在的目錄),如果沒有 node_modules 目錄,會在當前執行 npm 命令的目錄下生成 node_modules 目錄
2、可以通過 require() 來引入本地安裝的包。
全局安裝
1、將安裝包放在 /usr/local 下或者你 node 的安裝目錄
2、可以直接在命令行裏使用

卸載模塊
既然可以安裝那麼也會有卸載模塊的方式,

npm uninstall express

卸載完以後查看一下該模塊是否存在

npm ls

更新模塊

npm update express

更多知識我們會在NPM你真的會嗎?(二)中來講解大家敬請期待。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章