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
');
});
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 的本地全局仓库目录