npm发包探索之旅

水深无声 2023-03-13 09:11 30阅读 0赞

### 文章目录 ###

*   *  一. 建立npm账号
     *   *  方法一 官网注册
         *  方法二 命令注册
     *  二. 发布一个新包
     *   *  1. 登陆
         *  2. 建包
         *   *  2.1. 建一个工程文件夹
             *  2.2. 创建package.json
             *  2.3. 创建package.json关联的index.js文件
         *  3 发布包
     *  三 使用包
     *   *  1. 查看包
         *  2. 新建一个测试工程
         *  3. 安装包
         *  4. 测试类
     *  四 总结

--------------------

## 一. 建立npm账号 ##

### 方法一 官网注册 ###

登陆官网注册[npm官网][npm]

### 方法二 命令注册 ###

npm adduser

执行命令后，依次输入要注册的账号、密码、邮箱（回车键确认），如下图所示  
![在这里插入图片描述][20200512205130508.png]  
注：注册的时候可能会有多种报错情况

*  1.账号问题
 *  2.密码问题  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70]
 *  3.邮箱问题  
    ![在这里插入图片描述][20200512205424446.png]

**温馨提醒：账号注册好了之后，需要邮箱验证，只能PC验证，无法手机端验证！**

--------------------

## 二. 发布一个新包 ##

### 1. 登陆 ###

npm login

![在这里插入图片描述][20200512210134624.png]  
登陆好之后，登陆官网 --> 点击头像 --> Auth Tokens  
会发现列表多了一条访问令牌token（**这个是为了建立与npm之间的连接，给后面操作npm包做准备**）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 1]

### 2. 建包 ###

#### 2.1. 建一个工程文件夹 ####

本地创建一个工程目录，名字自定义（这边以random为例）

#### 2.2. 创建package.json ####

进入项目目录后，执行如下

npm init

填写package.json内容，可自定义，可直接换行确认，如下红框部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 2]

#### 2.3. 创建package.json关联的index.js文件 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 3]  
**index.js代码**

function randomString(len) { 
    　　len = len || 32;
       /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
    　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    
    　　var maxPos = $chars.length;
    　　var pwd = '';
    　　for (let i = 0; i < len; i++) { 
    　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    　　}
    　　return pwd;
    }
    
    module.exports = randomString;

### 3 发布包 ###

npm publish

发布失败情况如下，那是因为包名和别人重复了！  
**所以创建项目的时候，不要取通用的名字！！！**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 4]

修改包名为yh-random，重新发布  
发布成功，会提示 **+ 包名@版本号**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 5]

--------------------

## 三 使用包 ##

### 1. 查看包 ###

发布成功后， 在官网会看到如下包信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 6]

### 2. 新建一个测试工程 ###

新建测试工程random-test  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 7]  
**package.json文件**

{ 
      "devDependencies": { 
        "yh-random": "^1.0.0"
      }
    }

### 3. 安装包 ###

进入测试项目random-test目录

npm i yh-random

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 8]  
安装之后，项目会增加node\_modules目录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 9]

### 4. 测试类 ###

**test.html**

<html>
    	<head>
    	    <title>random test</title>
    	</head>
    	<body>
            <input type="button" value="生成" onclick="create()"/>
        </body>
       
        <script type="text/javascript" src="node_modules/yh-random/index.js"></script>
    	<script type="text/javascript">
    		function create(){ 
                alert(randomString(20));
    		}
    	</script>
    </html>

测试结果如下，就可以通过npm的随机数方法获取随机数了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 10]

--------------------

## 四 总结 ##

至此，整个npm包创建、安装、使用就走完了，摸索过程中还是会遇到各种各样的错误提示，上面已经贴了一些错误的情况，供大家参考。

前端的npm包可以理解为和后端的jar包一样，目的是为了将一些公共的逻辑抽出来，然后可以多处或多个项目去引用，这种思想去编程将会带来很大的效率。

[npm]: https://www.npmjs.com
[20200512205130508.png]: /images/20230312/ff69be9737df4da099376868f57c3076.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70]: /images/20230312/52cbb5a5d6984486a093b438d8043b6e.png
[20200512205424446.png]: /images/20230312/8fec159d56e14e6883e32b7b2c54302b.png
[20200512210134624.png]: /images/20230312/94022e96105e4491927818894eed8df8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 1]: /images/20230312/029a905b0b0b441f861397bd607068c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200514200754624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200514201202233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200514201702719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200514202032713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200514202245164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200514203039183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/2020051420350042.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200514203522295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2020051420570456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA==,size_16,color_FFFFFF,t_70