web前端技術目前非常火，web前端已經遠遠不是我們之前認為的只是做個html頁面，搞搞樣式美化一下，寫寫js解決下交互。從我這幾周的了解情況來看，web前端的有如下應用場景：
1. 全棧開發
由於node.js的存在，前端除了完成以前人們認知的前端領域外，還可以做后台的工作。但不代表它能替代一些后台語言如Java、PHP、Python等
2. 跨端應用
由於現在移動互聯網應用的流行，往往做一個app ，同時需要對Android、IOS、PC端都需要做展示和交互，而且還有小程序端，小程序端現在也是除了微信，還有支付寶、百度等等，這樣一來一套前端展示需要適配多種設備和平台，在以前沒有好的解決方案的時候，公司就需要有Android、IOS、H5三方面的人，得寫三套程序才可以。現在因為有了象uni-app 這類的框架技術，只需寫一套就可跨平台（多個小程序平台），跨端（Android、IOS、H5) 。
3. 小程序應用
隨着微信平台的發展，現在通常我們做app的時候都需要做微信小程序, 以方便推廣。微信小程序開發，官方是提供了框架和開發工具的，但是官方提供的原生框架就猶如JavaEE中的Servlet ，用起來不是很方便，所以就產生了一些第三方框架，主要有增強型的小程序框架如滴滴開源的MPX等，轉譯型的小程序框架如uni-app等。
前端之所以所以如此繁榮，我覺得離不開Node.js. ，離不開NPM。正是NPM的存在，使得前端具備了代碼插件化的能力，NPM已經是世界上最大的JavaScript的包管理器的軟件注冊表, 在里面我們能找到各類應用的組件和框架。NPM官方提供了一個網站 https://www.npmjs.com.cn/ 用於存放這些組件和框架，又稱NPM注冊中心，類似Maven的中心倉庫。可以通過這個網址在上面查找組件
https://www.npmjs.com/package/package
上面啰嗦了一大堆，下面寫點干貨，想了下，主要寫這么幾點：
1. 介紹下npm是如何管理組件的
2. 通過一個小demo演示如何編寫一個node.js的組件（或稱module) ，並將組件上傳至npm 的倉庫
3. 如何通過倉庫下載依賴,並應用到自己的項目中
1. npm是如何管理組件的
npm最早是用來為node.js來服務的，在node中有模塊的概念也稱module ，具體可見我之前博文 （Node的模塊系統）,我還是以Maven做參照來大致介紹下npm , 我們知道java中的maven項目會有一個pom配置文件，上面會有該項目依賴的組件（如組件的id 、所屬組織、版本號等信息）, 我們稱之為dependency 。並且dependency還有傳遞性，就是一個dependency可能還會用到其他的dependency。那么在npm中對應的這個pom文件就是package.json文件 。下面看看這個package.json文件的結構，看一個例子：
{ "name": "test1", //組件名稱，在npm倉庫中,name+vesion必須要唯一，要不然沒有區分組件 "version": "1.0.0", "description": "test npm ", "main": "index.js", //組件執行的入口，相當於java的main方法 "dependencies": { //依賴的第三方組件 "_huxin_demo1@1.0.0@huxin_demo1": "^1.0.0", "huxin_demo1": "^1.0.0" }, "devDependencies": {}, //表示在開發時依賴的組件，這個有點象maven依賴中的scope=test的情況 "scripts": { "test": "echo hello world" //這個是npm用於測試組件的,比如組件下載下來，可以通過 npm run test 來簡單測下看組件是否可調用 }, "repository": { "type": "git", "url": "https://gitee.com/huxinstudy_admin/npm-test.git" //當前組件對應的git倉庫地址，只是一個描述性屬性 }, "keywords": [ //這應該只是用於搜索組件用 "npm", "run", "test" ], "author": "huxin", "license": "ISC" //組件的開源方式 }
更詳細的內容，可參照https://www.npmjs.cn/files/package.json/
2. 通過一個小demo演示如何編寫一個node.js的組件（或稱module) ，並將組件上傳至npm 的倉庫
首先明確這個demo是為了寫一個組件即module，這樣以后其他項目可以依賴這個組件達到代碼復用的效果,具體是以下幾個步驟：
(1) 新建一個目錄,並cd進入這個目錄
(2) npm init 命令創建 package.json 文件
{ "name": "com.dxww", "version": "1.0.0", "description": "npm 測試", "main": "index.js", "scripts": { "test": "node index.js" }, "repository": { "type": "git", "url": "https://gitee.com/huxinstudy_admin/npm-test.git" }, "keywords": [ "npm", "test" ], "author": "huxin", "license": "ISC" }
(3) 編寫組件邏輯代碼
創建一個index.js文件， 並且代碼中引用了http組件 , 並且這個index.js 文件在package.json中配置為入口執行文件，即別的項目引用了組件,就會執行這個文件的代碼, 這個代碼邏輯就是利用node中的http組件創建一個web服務，監聽4000端口，訪問 http://{主機ip}:4000 會在頁面上輸出: Hello World
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World \n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
（4) 到 npm 官網 注冊個帳號 , 這是我個人在官方倉庫的頁面，可以看到我2018年就嘗試傳過一個demo
(5) 發布組件到 npm官方倉庫
先執行 npm login 完成登錄驗證, 再執行 npm publish 即可
發布完，在個人頁面上就能看到組件了：
3. 如何通過倉庫下載依賴,並應用到自己的項目中
如何使用涉及到 npm對模塊的全局安裝和本地安裝的問題，即要先要把模塊下載到本地才能使用，分四種方式：
npm install moduleName # 安裝模塊到項目目錄下 npm install -g moduleName # -g 的意思是將模塊安裝到全局，具體安裝到磁盤哪個位置，要看 npm config prefix 的位置。 npm install --save moduleName # --save 的意思是將模塊安裝到項目目錄下，並在package文件的dependencies節點寫入依賴。 npm install --save-dev moduleName # --save-dev 的意思是將模塊安裝到項目目錄下，並在package文件的devDependencies節點寫入依賴。
使用 npm uninstall -g 可以刪除以前的下載 。本地全局倉庫可通過 npm root -g 命令進行查看 , 例如我機器上是：
/usr/local/Cellar/nvm/0.37.2/versions/node/v14.17.0/lib/node_modules
（1) 還是需要用 npm init 來完成項目的創建，也就是在項目根目錄下生成package.json文件
(2) 如果npm install不加 -g參數，那么組件只會下載到當前目錄,會在當前目錄下生成 node_modules 目錄, 這里為了把組件加入到package.json的dependencies中,我們執行
npm install --save com.dxww
這時會發現目錄下package.json文件發生變化了，多了標紅的這一行,
{ "name": "test1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "huxin", "license": "ISC", "dependencies": { "com.dxww": "^1.0.0" }
並且還多了個 package-lock.json文件 ,這個文件的作用在這順便也提一下：
package.json里面定義的是版本范圍（比如^1.0.0），具體跑npm install的時候安的什么版本，要解析后才能決定，這里面定義的依賴關系樹，可以稱之為邏輯樹（logical tree）。
node_modules文件夾下才是npm實際安裝的確定版本的東西，這里面的文件夾結構我們可以稱之為物理樹（physical tree）。
安裝過程中有一些去重算法，所以你會發現邏輯樹結構和物理樹結構不完全一樣。
package-lock.json可以理解成對結合了邏輯樹和物理樹的一個快照（snapshot），里面有明確的各依賴版本號，實際安裝的結構，也有邏輯樹的結構。
(3) 對組件進行調用
創建一個新的目錄test1,在tes1目錄下執行 npm install -g com.dxww 或者 npm install com.dxww , 然后在該上錄下編寫一個test.js文件
var demo1 = require("dxww.com") //require 大致相當於java的import
然后在命令行下執行 node test.js , 會發現本地起了個服務並監聽3000端口 ,控制台輸出：
Server running at http://127.0.0.1:3000/
用瀏覽器訪問：
這里有個點要注意下：如果是全局安裝module時, 用node執行時會出現找不到module的問題，這個其實跟node 查找依賴的規則有關，一般會先找地目錄，然后去本地全局倉庫去找，但有時候和node的安裝方式有關，它會找不到，解決的辦法就設置一個全局變量就可以了，如果是mac ，就在修改用戶目錄下的 .bash_profile 文件 ,增加
export NODE_PATH={npm root -g的輸出目錄名}
也就是要設置 NODE_PATH環境變量指向npm 的本地全局倉庫目錄