npm使用總結

時間 2019-11-24

標籤 npm 使用總結简体版

原文原文鏈接

簡述

npm 全稱爲 node package manager, 即 node的包管理器。我以爲正是由於有npm 這一大生態，纔有瞭如今node 社區的繁榮。我這篇文章會概括總結一些咱們經常使用的 npm 知識，包括npm 命令、版本管理、依賴、以及如何發佈一個包。javascript

package.json

package.json 是npm包的入口, 涵蓋了這個包的基本信息, 如圖我在文件夾中進行 npm init, 會讓我填寫如下信息: html

一個常見的package.json 文件以下:java

{
  "name": "foo",
  "version": "1.0.0",
  "description": "test ",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "ramda": "^0.25.0",
    "react": "^16.0.0"
  },
  "repository": {
    "type": "git",
    "url": "test.git"
  },
  "keywords": [
    "some",
    "keywords"
  ],
  "author": "Bob",
  "license": "MIT"
}

複製代碼

其中 main 表明此包的入口文件, 當別的包進行 var foo = require ('foo')的時候, 引用的其實就是這個main字段表明的index.js文件
scripts 表明在這個npm包中運行的命令
dependencies 表明這個npm 包依賴的包, 當 npm install foo的時候，會將這個包的依賴包也一塊兒安裝

version

一個npm包從誕生開始,代碼庫會不斷地迭代，developer可能會不斷地添加新功能、增長新特性、修改bug等,那麼這個包的版本也會不斷變化, 如何比較好的管理(迭代)一個包的版本呢? 咱們能夠參考react的CHANGELOG 咱們能夠用 npm version命令, 而不是手動地去更改 package.json文件。經常使用的命令以下:node

假如當前包的版本號是1.0.5jquery

npm version 1.0.5-beta17 "version": "1.0.5" => "version": "1.0.5-beta17"webpack

明確指定須要更新到的版本號, 開發階段,通常用alpha, beta, rcgit
npm version prerelease "version": "1.0.5" => "version": "1.0.5-2"github

基於如今版本的先行版本web
npm version patch "version": "1.0.5" => "version": "1.0.6"

Fix bug, 小改動，仍向後兼容
npm version minor "version": "1.0.5" => "version": "1.1.0"

增長新特性，仍向後兼容
npm version major "version": "1.0.5" => "version": "2.0.0"

大改動，大版本，沒法向後兼容
npm version premajor "version": "1.0.5" => "version": "v2.0.0-0"

大改動，大版本的先行版本，沒法向後兼容

全部的 npm version pre(xxx)命令都會是一個先行版本, 會在版本號後面多出 -n,表明這不是一個正式版本.

~與^ 表明什麼?

咱們常會在代碼中看到這樣一段：

"ramda": "^0.25.0",
    "react": "~16.0.0" 
複製代碼

~表明你在項目中更新包(npm update)的時候, 能夠更新到最新的一個 patch版本即從 0.25.0 => 0.25.x,但不包括 0.26.x

^表明你在項目中更新包(npm update)的時候, 能夠更新到最新的一個 minor版本即從 16.0.0 => 16.x.x,但不包括 17.x.x

update

通常咱們用npm 的話, 直接npm i packageName 這樣就能夠直接安裝最新的包了, npm update用的比較少，不如直接npm install 來的方便。 yarn 除外, yarn 須要本身 yarn upgrade packageName@x.x.x 這樣。

registry

因爲國外的服務器訪問速度可能比較慢，有時候咱們須要訪問鏡像源，這時候咱們可使用 cnpm 或者設置國內的鏡像源

全局使用：
- npm set registry https://registry.npm.taobao.org (或者 npm config set registry otherUrlPath , 具體config使用請看npm config -h)
- 官方registry地址: http://registry.npmjs.org
項目中使用: .yarnrc或者.npmrc中設置 registry "http://npm.xxx.com/"
npm config get registry (或者npm get registry) 能夠獲取當前使用的源地址信息

npm info

npm info packageName 查看指定包的發版信息, 通常我用它來查看此包的最新發版記錄

npm publish

激動人心的時刻！若是想發佈一個包到 npm 上,那麼按照以下步驟進行操做

npm adduser --registry https://registry.npmjs.org
npm publish用於將當前模塊發佈到npmjs.com。執行以前，須要向npmjs.com申請用戶名。（adduser）

npm publish --tag beta (若是當前包是一個beta版)

注意: 不能發佈npm中已經存在的包

npm unpublish

npm unpublish packageName --force
根據規範，只有在發包的24小時內才容許撤銷發佈的包（ unpublish is only allowed with versions published in the last 24 hours）
即便你撤銷了發佈的包，發包的時候也不能再和被撤銷的包的名稱和版本重複了（即不能名稱相同，版本相同，由於這二者構成的惟一標識已經被「佔用」了）

npm link 本地關聯包

當咱們在發包前須要進行本地測試的時候，每每須要 npm link 進行管理包測試

相關連接:

docs.npmjs.com/cli/link

javascript.ruanyifeng.com/nodejs/npm.…

使用步驟:

在須要關聯的包(好比packageName)文件夾內執行 sudo npm link 而後會顯示:

/usr/local/lib/node_modules/packageName -> /Users/shaoqianfei/Desktop/work/packageName
而後在須要用到此包的項目中執行 npm link packageName 而後顯示

added 1 package in 0.756s
/Users/shaoqianfei/Desktop/test-sth/node_modules/packageName -> /usr/local/lib/node_modules/packageName
複製代碼

刪除

若是須要刪除關聯能夠在項目目錄內使用npm unlink命令

有一些坑：

若是在outer 包目錄(此包有package.json)下面有兩個包package1 和package2，在package2 目錄下執行 npm link命令，則會link outer 這個包，而不是package2:heavy_exclamation_mark: (它會link最外層包)

解決辦法,先把最外層的package.json改成 package.json-xxx, 而後在內層包進行npm link, 而後再改回原來名字。若是link有改動,須要從新npm start.不然緩存的是原來的文件（或者嘗試先將 import 語句註釋掉,而後再import來解決）

npm 包依賴

devDependencies也會被打包

我從網上看到，大多數人都說 dependencies與devDependencies的區別是：前者是生產環境須要的，好比 react , lodash , 後者是開發環境才須要的,好比 babel, eslint,jest等等。還有人說:"若是安裝到 devDependencies 則 npm run build打包的時候，不會打包到最終的文件中去，上到生產環境會報錯(好比 lodash安裝到devDependencies中)".

然而,我親自試了一下，將jquery包安裝到 devDependencies, 而後

import $ from "jquery" // 固然此處是須要import 或者 require jquery的,否則jquery不會被打包 
console.log("上午11:06:36", $, $('body'))
複製代碼

不管是在開發環境, 仍是打包完成以後到生產環境(用的http-server跑build文件夾)都是 ok 的，結果都能正常顯示以下:

上午11:06:36 ƒ (e,t){return new Ee.fn.init(e,t)} Ee.fn.init [body, prevObject: Ee.fn.init(1)]
複製代碼

而且我在打包以後的js文件中搜素 jquery也能搜索到. 這說明 ~~~即使是devDependencies的包也會被打包到生產環境~~~, devDependencies的包且被引用的狀況下也會被打包到生產環境中,並不會報錯, 網上的說法是錯誤的,把npm包裝到devDependencies 能減少最終打包的體積也是錯誤的

https://mp.weixin.qq.com/s/i_Zxaie1xMALymQ-1Jqz_Q 此文章說把npm包裝到devDependencies 能減少最終打包的體積

項目使用

而且,我看我如今的項目 babel eslint husky是放在 devDependencies中的，然而在 create-react-app使用上, npm run eject 以後, 能看到 babel,eslint, react等都是放在 dependencies中的, 說明其實放到dependencies 和 devDependencies 區別只是讓開發者可以辨別哪些是包主要是用於開發的時候，哪些是不管如何都須要的很重要的包。

~~~兩者最終都會打包的。~~~ 被引用(import/require)的包會被打包,沒被引用的包或者只是和開發環境相關的包不會被打包如: webpack, eslint 等不會被打包。