npm 发包

前几天封装了公用的locaStorage组件,当然封装后需要发布npm官网,于是摸索了一番终于搞定了,总结下来希望对大家有所帮助

npm安装的package一般支持下面几大类:

本地包

url远程包

仓库中的包

之前有写过如何链接本地和仓库中的包,想了解的可以点这里,下面进入正题介绍npm发布包包到公共的平台上

一  npm包发布

1.注册包仓库账号

为了维护包,NPM必须要使用仓库账号才允许将包发布到仓库中。注册账号的命令是npm adduser。

$ npm adduser
Username:
Password:
Email:

当然注册也可以直接到官网注册结果是一样的

登陆 https://www.npmjs.com 用邮箱注册接收验证邮件验证就完事了
(此处有两封邮件:Welcome to npm和Verify your npm email address )

如果已经注册账号:

 则我们用npm login 登录即可

 证明是否登录成功: 

npm who am i

2.发布

$ npm init //生成package.json,如果有就不用了
$ npm publish [floder] //不带参数默认是当前目录

如果你以后修改了代码,然后想要同步到 npm 上的话请修改 package.json 中的 version 然后再次 publish,更新的版本上传的版本要大于上次

3.权限

 管理包权限:

  通常,一个包只有一个拥有权限进行发布。如果需要多人进行发布,可以使用npm owner 命令帮助你管理包的所有者:

  使用这个命令,也可以添加包的拥有者,删除一个包的拥有者:

$  npm owner ls <package name>
$  npm owner add <user> <package name>
$  npm owner rm <user> <package name>

注:完全符合CommonJS规范的包目录应该包含如下这些文件。

npm包实际是一个存档文件,即一个目录直接打包为.zip或tar.gz格式的文件,安装后解压还原为目录。我们开发npm包模块的时候,就可以按照以下目录结构,进行开发:

  package.json : 包描述文件。

  bin: 用于存放可执行二进制文件的目录。

  lib:用于存放javascript代码的目录。

  doc:用于存放文档的目录。

  test: 用于存放单元测试用例的代码。

4.删除发过的npm包

$  npm --force unpublish testxxxxx

注:删除要用force强制删除。超过24小时就不能删除了。自己把握好时间。(删除npm包 ,很难删除,因为怕线上有人在用)

二 npm包发布问题及解决

1.使用 cnpm 的注意报错:

no_perms Private mode enable, only admin can publish this module

设置回原本的就可以了:

npm config set registry http://registry.npmjs.org 

建议国内采用淘宝的cnpm,发包的时候使用npm 传送门

2.

You cannot publish over the previously published version

npm包package.json中registory属性一定要填写,每次publish npm时package.json中version版本一定要大于上一次。

3.这样的报错信息,往往是没有登录成功

npm publish failed put 500  unexpected status code 401

操作npm login

4.

you do not have permission to publish "your module name". Are you logged in as the correct user?

这种很可能是你的包名已经被别人占用了,只能修改package.json中的name,重新发布。

如果你确定你的包名没有被占用,还有一种可能是本地测试的时候link过或安装过,缓存中已经存在该包,但是测试的时候信息不一致造成的,删除用户npm目录下的自己的包,尝试重新publish。

5.

Request Entity Too Large

这种一般是因为包目录下包含了多余的或者不需要上传到npmjs的文件,在包目录下新建一个.npmignore忽略了就行,规则类似.gitignore

6.

you must verify your email before publishing a new package

这种需要你先验证你的邮箱,可能网速会很慢只要你填写了一个邮件地址,npm就会发一封邮件到你的邮件地址上,打开填写的邮件地址验证即可

三 github项目徽章的添加和设置

如果想让自己的npm包看上去更高大尚一些,可以添加一些徽章,添加徽章很简单可以点击这里去添加想要的徽章

没有伞的孩纸只能拼命奔跑

原文地址:https://www.cnblogs.com/hongsusu/p/9426835.html

时间: 2024-10-12 10:39:00

npm 发包的相关文章

npm 发包的简易流程

 发包的简易流程: https://www.jianshu.com/p/ea64fd01679c 错误集锦: npm publish error: 403. You do not have permission to publish 'project name':包同名 使用方法指南: 1. 注册一个账号 你有两种方式注册一个账号: 去npm 网站注册或者使用npm adduser命令 2. 输入npm init 初始化一个项目,准备好自己的包文件 name: 包名 version: 包版本号

npm 发包whale-makelink

whale-makelink是一个npm工具,是强业务的工具,可以将当前工程目录下的工程文件夹,在README中生成工程的链接地址.Demo. 一.npm init 使用npm init生成package.json { "name": "whale-makelink", "version": "1.0.3", "description": "", "main": &q

10秒钟构建你自己的”造轮子”工厂! 2019年github/npm工程化协作开发栈最佳实践

发起一个github/npm工程协作项目,门槛太高了!! 最基础的问题,你都要花很久去研究: 如何在项目中全线使用es2017代码? 答案是babel 如何统一所有协作者的代码风格? 答案是eslint + prettier 如何测试驱动开发,让项目更健壮? 答案是jest 如何持续化集成,方便更多协作者参与项目? 答案是circleci 这四样工具的配置,是每个github项目都会用上的.另外,gitignore配置.editconfig.readme.lisence...也是必不可缺的. 你

打造自己的 JavaScript 武器库

原文 https://segmentfault.com/a/1190000011966867 github:https://github.com/proYang/outils 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点,我们在业务开发过程中,经常会重复用到 日期格式化. url参数转对象. 浏览器类型判断. 节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到 npm,以提高开发效率. 这

JavaScript武器库

自己打造一把趁手的武器,高效率完成前端业务代码. 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化.url参数转对象.浏览器类型判断.节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到npm,以提高开发效率. 这里,笔者已经封装并发布了自己的武器库 outils,如果你对本项目感兴趣,欢迎 star 本项目.当然你也可以在本项目的基础上封装自己的

常用函数汇总

这里先分类整理下,之前项目中多次用到的工具函数. 1.Array JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /** * * @desc 判断两个数组是否相等 * @param {Array} arr1 * @param {Array} arr2 * <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> {Boolean} */ function arra

打造自己的JavaScript武器库(转)

作者: SlaneYang https://segmentfault.com/a/1190000011966867 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率.这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化.url参数转对象.浏览器类型判断.节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到npm,以提高开发效率. 这里,笔者已经封装并发布了自己的武器库 outils,如果你对本项目感兴

AST抽象语法树 Javascript版

在javascript世界中,你可以认为抽象语法树(AST)是最底层. 再往下,就是关于转换和编译的"黑魔法"领域了. 现在,我们拆解一个简单的add函数 function add(a, b) { return a + b } 首先,我们拿到的这个语法块,是一个FunctionDeclaration(函数定义)对象. 用力拆开,它成了三块: 一个id,就是它的名字,即add 两个params,就是它的参数,即[a, b] 一块body,也就是大括号内的一堆东西 add没办法继续拆下去了

[转帖]AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解

AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解 https://segmentfault.com/a/1190000016231512 太长没看完.. javascriptvue-clicommonjswebpackast 阅读约 27 分钟 抽象语法树(AST),是一个非常基础而重要的知识点,但国内的文档却几乎一片空白. 本文将带大家从底层了解AST,并且通过发布一个小型前端工具,来带大家了解AST的强大功能 Javascript就像一台精妙运作的机器,我们可以