npm开发指南从npm包的开发，发布到引用

Posted 2023-02-22 曾胖神父

引言

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;

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);

服务器项目地址：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. 来源于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 ↩︎