npm发包探索之旅

最新推荐文章于 2024-07-29 13:58:45 发布

汤圆一号

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量269

点赞数 1

分类专栏：前端文章标签： npm javascript 前端

本文链接：https://blog.csdn.net/weixin_43968234/article/details/106084853

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一. 建立npm账号

方法一官网注册

登陆官网注册npm官网

方法二命令注册

npm adduser

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

1.账号问题
2.密码问题
3.邮箱问题

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

二. 发布一个新包

1. 登陆

npm login

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

2. 建包

2.1. 建一个工程文件夹

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

2.2. 创建package.json

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

npm init

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

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

在这里插入图片描述
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

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

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

三使用包

1. 查看包

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

2. 新建一个测试工程

新建测试工程random-test
在这里插入图片描述
package.json文件

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

3. 安装包

进入测试项目random-test目录

npm i yh-random

在这里插入图片描述
安装之后，项目会增加node_modules目录

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的随机数方法获取随机数了
在这里插入图片描述

四总结

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

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

汤圆一号

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
npm发包探索之旅

一. 建立npm账号方法一官网注册登陆官网注册npm官网方法二命令注册npm adduser执行命令后，依次输入要注册的账号、密码、邮箱（回车键确认），如下图所示注：注册的时候可能会有多种报错情况1.账号问题2.密码问题3.邮箱问题温馨提醒：账号注册好了之后，需要邮箱验证，只能PC验证，无法手机端验证！二. 发布一个新包第一步登陆npm login登陆好之后，登陆官网 --> 点击头像 --> Auth Tokens会发现列表多了一条访问令牌t
复制链接

扫一扫