npm 模塊的組成和發佈

時間 2019-11-08

標籤 npm 模塊組成發佈简体版

原文原文鏈接

在手頭的項目中，因爲業務所屬範圍的區分，團隊之間負責的不一樣的業務，可是須要把這些業務整合到同一個側邊欄中，且須要使用相同的權限控制系統。vue

因此決定將側邊欄，以頂部狀態欄抽離成一個 framework，發佈到 npm ，其他子項目中共同發佈。node

可是我真的對 npm、node_module 的原理不是很熟悉。那麼下面我來整理一番。webpack

node_modules

使用 npm install XXX ，當前項目會自動生成 node_modules 文件夾。咱們從它提及。ios

require

在 node 環境下輸出 module ，獲得以下結果。web

╭─~/MyWorkspace/npm-module
╰─➤  node
> module
Module {
  id: '<repl>',
  exports: {},
  parent: undefined,
  filename: null,
  loaded: false,
  children: [],
  paths:
   [ '/Users/leiliao/MyWorkspace/npm-module/repl/node_modules',
     '/Users/leiliao/MyWorkspace/npm-module/node_modules',
     '/Users/leiliao/MyWorkspace/node_modules',
     '/Users/leiliao/node_modules',
     '/Users/node_modules',
     '/node_modules',
     '/Users/leiliao/.node_modules',
     '/Users/leiliao/.node_libraries',
     '/Users/leiliao/.nvm/versions/node/v10.15.3/lib/node' ] }
>
複製代碼

id 是表示 module 的惟一標示，咱們把重點放到 paths 中，當咱們使用 import 或者 require 命令時，會從 paths 中的以下路徑依次尋找。npm

在當前項目根目錄下也就是 /MyWorkspace/npm-module 新建 node_modules 文件，而後在 node_modules 中新建 framework.js 文件 console.log('i am framework');json

- node_modules
    -  framework.js 
- index.js
複製代碼

在當前項目根目錄下新建 index.js , require('framework');axios

使用 node index,輸出 i am framework, 使用 require 在 /Users/leiliao/MyWorkspace/npm-module/node_modules 找到了 framework.jsapi

注意，若是在項目根目錄和node_modules中同時存在 framework.js 會優先尋找node_modules的文件。bash

- node_modules
    - frameworkjs 
- index.js
- frameworkjs  
複製代碼

咱們在 node_modules 建立一個 framework 文件夾,具體文件結構以下

- node_modules
    - framework
        - index.js
        - start.js
        - package.json
- index.js
- framework.js 
複製代碼

使用 require('framework'); 時，若是 framework 文件夾中沒有 package.json 文件，默認尋找當前文件夾 index.js ，若是有 package.json 文件，則尋找 "main" 字段中的路徑。好比 "main": "start.js",

package.json

來看一段 package 的文件。

{
  "name": "npm-framework-test",
  "version": "a.b.c",
  "license": "MIT",
  "description": "",
  "author": "Leo",
  "files": [
    "src",
    "public",
    "dist",
    "webpack"
  ],
  "scripts": {
    "build": "node build/build.js",
    "start": "node build/dev-server.js"
    "prepublish": "npm run build"
  },
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "dependencies": {
    "js-cookie": "^2.2.0",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^8.6.2",
    "axios": "0.18.0",
    "vue": "^2.5.16",
  },
  "peerDependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.16",
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 4.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

複製代碼

對以上規則作出解釋:

version

即 "版本號",當使用 npm i 時每個模塊都默認帶有版本號，且版本號不能重複，以 "version": "a.b.c", 做爲例子。

a - major version 大版本的升級意味着與低版本的不兼容和重大升級，好比 vue2.x -> vue3.x
b - minor version 小版本的升級在當前大版本下的 api 和使用都是兼容的。
c - patch 用於修復 bug 等。

"1.2.3-beta.2" - 帶預發佈關鍵詞的，如 alpha, beta, rc, pr 等。

使用 npm i 具體安裝某個模塊。使用 npm outdated npm outdated。

╭─~/MyWorkspace/npm-module
╰─➤  npm view vue versions

[ 
  ...
  '2.0.0',
  '2.0.1',
  '2.0.2',
  '2.0.3',
  '2.0.4',
  '2.0.5',
  '2.0.6',
  '2.0.7',
  '2.0.8',
  '2.1.0',
  '2.1.1',
  '2.1.2',
  '2.1.3',
  '2.1.4',
  '2.1.5',
  '2.1.6',
  '2.1.7',
  '2.1.8',
  '2.1.9',
  '2.1.10',
  ...
  '2.2.0',
  '2.2.3',
  '2.2.4',
  '2.2.5',
  '2.2.6',
  '2.3.0-beta.1',
  '2.3.0',
  '2.3.1',
  '2.3.2',
  ...
  '2.5.17-beta.0',
  '2.5.17',
  '2.5.18-beta.0',
  '2.5.18',
  '2.5.19',
  '2.5.20',
  '2.5.21',
  '2.5.22',
  ...
  '2.6.8',
  '2.6.9',
  '2.6.10' ]
複製代碼

首先須要在新建文件夾中 npm init

npm i vue

╭─~/MyWorkspace/npm-module
╰─➤  npm i vue

+ vue@2.6.10
added 1 package from 1 contributor in 1.658s

複製代碼

咱們能夠看到默認安裝了當前的最新版本。

npm i vue@x.x.x

請使用npm uninstall 卸載重複的模塊

指定版本進行安裝

╭─~/MyWorkspace/npm-module
╰─➤  npm i vue@2.0.0

+ vue@2.0.0
added 1 package from 1 contributor in 1.986s
複製代碼

版本範圍匹配

─~/MyWorkspace/npm-module
╰─➤  npm i vue@^2.1.1
npm WARN npm-module@1.0.0 No description
npm WARN npm-module@1.0.0 No repository field.

+ vue@2.6.10
added 1 package from 1 contributor in 1.38s
複製代碼

^2.1.1 安裝 2.x.x 版本下的最高版本。

╭─~/MyWorkspace/npm-module
╰─➤  npm i vue@~2.1.1
npm WARN npm-module@1.0.0 No description
npm WARN npm-module@1.0.0 No repository field.

+ vue@2.1.10
added 1 package from 1 contributor in 1.716s
複製代碼

~2.1.1 安裝 2.1.x 下的最高版本。

如下須要在 package.json 指定後，再使用npm i 進行安裝。 >=2.1.1 安裝大於或等於 2.1.1 的最高版本，<=2.1.1 同理。

license

模塊的遵照的協議吃，常見的是MIT 。咱們使用阮一峯老師的圖。

peerDependencies

主要是用在 framework 的開發時，現有項目依賴於 framework 可是，某些特殊的依賴又不想被 framework 給限制在本版本當中（想使用更高的版本）。

好比 framework 中依賴 "axios": "0.18.1", 在 peerDependencies 中聲明 "axios": "^0.18.1" 後，在實際項目中安裝大於 0.18.1 的版本，framework會優先使用項目中的現有高版本。

使用 peerDependencies 時建議和 devDependencies 配合使用，不要在第三方庫中下載任何依賴。

npm or yarn

yarn 的出現只要是想解決早期 npm 下載速度和版本鎖定的問題。可是如今 npm > 5 的版本中已經沒有這些問題了。

須要注意的是：項目請使用單一管理包工具進行管理，不是使用 npm 和 yarn 混用。

發佈

註冊

npm 現有社區最大的平臺就是 npmjs。咱們通常會從這上面取輪子。

可是各個公司中會存在本身的 npm 庫。在註冊以前須要指定全局的 npm 倉庫地址。

# 將registry 指定爲須要發佈的庫
npm config set registry https://registry.npmjs.org/

# 可查看當前庫的指向
npm config list
複製代碼

能夠在 npm 官網直接註冊，也能夠使用如下命令：

npm adduser
複製代碼

準備一個 npm 包

在上文中已經講到 node_modules 如何可以被 require，這裏使用 package.json 的方式。

如上文中的 package.json, 其中 scripts 字段中的 prepublish 命令，能夠在發佈以前會prepublish

上傳遠程倉庫

╭─~
╰─➤  npm login
Username: leolei
Password:
Email: (this IS public) 810364013@qq.com
Logged in as leolei on https://registry.npmjs.org/.

╭─~/MyWorkspace/npm-module
╰─➤  npm publish                                                            
npm notice
npm notice 📦  npm-framework-test@1.0.0
npm notice === Tarball Contents ===
npm notice 242B package.json
npm notice 47B  index.js
npm notice === Tarball Details ===
npm notice name:          npm-framework-test
npm notice version:       1.0.0
npm notice package size:  322 B
npm notice unpacked size: 289 B
npm notice shasum:        ae09a4635fbcf27b34ad6c643038ceb7d20de8dc
npm notice integrity:     sha512-50nWTjDIq03U8[...]t8ZW8iGTngnxQ==
npm notice total files:   2
npm notice
+ npm-framework-test@1.0.0

複製代碼

發佈失敗多是包名重複，版本號重複，登陸失敗等緣由。

登陸 npm 就能夠看到發佈信息。