【npm开发指南（1）】从npm包的开发，发布到引用

引言

npm（全称 Node Package Manager，即“node包管理器”）是Node.js预设的、用JavaScript编写的软体套件管理系统¹。而npm提供了一个名为“registry”的查询服务，该服务可以让用户可通过本地的npm命令下载并安装指定模块。此外用户也可以通过npm把自己设计的模块分发到registry上面²。综合以上，我们一般说的npm包的开发与发布，指的是通过JS开发npm模块，然后通过npm命令发布至npm模块社区。

.

开发缘由

大屏可视化项目需要用到疫情实时数据，然后疫情实时数据的链接跟本地项目不在同一域名，所以使用XMLHttpRequest获取会导致跨域警告。那么正确的做法是使用Node.js开发一个本地服务器，本地服务器作为中转服务器通过链接获取疫情实时数据，最后项目访问本地服务器获取到实时数据。
然后，想到都使用Node.js了，就干脆将获取疫情实时数据这块的逻辑封装成npm包。

整体开发思路

客户端访问服务器，服务器通过链接，获取城市名称，并将城市名称传入封装好的npm包。其中npm包通过axios访问api接口³，访问之后对其进行初步解析，最后返回相关数据。返回的相关数据通过服务器，反馈至客户端，客户端在进行二次解析，并呈现在界面中。

npm包具体代码

const axios = require(`axios`);

//https://c.m.163.com/ug/api/wuhan/app/data/list-total
function getCovidInfo(statename, provinceName) {

   return new Promise((resolve, reject) => {
      axios.get(`https://c.m.163.com/ug/api/wuhan/app/data/list-total`)
         .then(response => {
            let reslut = getprovinceCovidInfo(statename, provinceName, response.data.data.areaTree);
            resolve(reslut);
         })
         .catch(e => {
            console.log(e);
            reject(`网络异常`);
         }
         )
   })
}
//获取省新冠信息
function getprovinceCovidInfo(statename = `中国`, provinceName, data)
{
   let statInfo = null;
   let provinceInfo = null;
   try {
      statInfo = data.find(item => {
         return item.name == statename;
      })
      if (!statInfo) {
         return `未找到该国家信息`;
      }
      if(!statInfo.children)
      {
         return `该国家不存在省`;
      }
      statInfo.children.forEach(province => {
      
         if(province.name==provinceName)
         {
            provinceInfo=province;
            return;
         }
        
      });
     
   } catch {

   }
 
   if (!provinceInfo) {
      return `未找到该省信息`;
   }
   return provinceInfo;
}
//获取城市新冠信息
function getCityCovidInfo(statename = `中国`, cityName, data) {
   let statInfo = null;
   let cityInfo = null;
   try {
      statInfo = data.find(item => {
         return item.name == statename;
      })
      if (!statInfo) {
         return `未找到该国家信息`;
      }
      if(!statInfo.children)
      {
         return `该国家不存在省`;
      }
      statInfo.children.forEach(province => {
         //考虑到可能会出现省市同级的情况，比如北京
         if(province.name==cityName)
         {
            cityInfo=province;
            return;
         }
         province.children.forEach(city=>{
            
            if(city.name==cityName)
            {
               
               cityInfo=city;
               return;
            }
         })
      });
     
   } catch {

   }
 
   if (!cityInfo) {
      return `未找到该城市信息`;
   }
   return cityInfo;
}
module.exports = getCovidInfo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

NodeJS服务器的开发与NPM的应用

使用该npm搭建Node.js服务器（代码如下）

const covidData=require(`covid19package`);
const http=require(`http`);
const url=require(`url`);
http.createServer((req,res)=>{
   let pathObj=url.parse(req.url);
   let query=decodeURI(pathObj.query);
   
   //解除访问限制
   res.setHeader(`Access-Control-Allow-Origin`,`*`);
   if(pathObj.pathname==`/getCovidInfo`)
   {
       let provinceName=query.split(`=`)[1];
       console.log(provinceName);
       covidData(`中国`,provinceName).then(data=>{
          console.log(data);
          res.end(JSON.stringify(data))
       });
   }
   else
   {
    res.writeHead(404,`路径错误`);
    res.end(`404 Not Found`);
   }
}).listen(8888);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

服务器项目地址：https://github.com/zengpang/COVID19Server

前端访问NodeJS服务器获取数据

代码如下

//获取疫情数据
function getepidemicInfo(provinceName) {
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest();
        let selectprovince = provinceName.replace(/省|自治区|维吾尔/g,``);
        console.log(selectprovince);
        let url = encodeURI(`http://localhost:8888/getCovidInfo?province=${selectprovince}`);
        xhr.open(`GET`, url, true);
        xhr.onload = function () {
            resolve(JSON.parse(xhr.responseText));
        };
        xhr.onerror=function(){
           reject(`出现异常`);
        };
        xhr.send();
    });
  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

最终应用效果

---

1. 来源于wiki对于npm的定义，https://zh.m.wikipedia.org/zh-hans/Npm ↩︎

2. registry指的就是npm模块社区，该社区拥有许多用户上传的npm模块。社区链接为：https://www.npmjs.com/ ↩︎

3. 接口的链接为https://c.m.163.com/ug/api/wuhan/app/data/list-total ↩︎