在手頭的項目中,因爲業務所屬範圍的區分,團隊之間負責的不一樣的業務,可是須要把這些業務整合到同一個側邊欄中,且須要使用相同的權限控制系統。vue
因此決定將側邊欄,以頂部狀態欄抽離成一個 framework,發佈到 npm ,其他子項目中共同發佈。node
可是我真的對 npm、node_module 的原理不是很熟悉。那麼下面我來整理一番。webpack
使用 npm install XXX ,當前項目會自動生成 node_modules 文件夾。咱們從它提及。ios
在 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 的文件。
{
"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"
]
}
複製代碼
對以上規則作出解釋:
即 "版本號",當使用 npm i
時每個模塊都默認帶有版本號,且版本號不能重複,以 "version": "a.b.c",
做爲例子。
"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
╭─~/MyWorkspace/npm-module
╰─➤ npm i vue
+ vue@2.6.10
added 1 package from 1 contributor in 1.658s
複製代碼
咱們能夠看到默認安裝了當前的最新版本。
請使用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
同理。
模塊的遵照的協議吃,常見的是MIT 。咱們使用 阮一峯 老師的圖。
主要是用在 framework 的開發時,現有項目依賴於 framework 可是,某些特殊的依賴又不想被 framework 給限制在本版本當中(想使用更高的版本)。
好比 framework 中依賴 "axios": "0.18.1", 在 peerDependencies
中聲明 "axios": "^0.18.1" 後,在實際項目中安裝大於 0.18.1 的版本,framework會優先使用項目中的現有高版本。
使用
peerDependencies
時建議和devDependencies
配合使用,不要在第三方庫中下載任何依賴。
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
複製代碼
在上文中已經講到 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 就能夠看到發佈信息。