使用npm发布自己包(详细教程)

简介: 使用npm发布自己包,以及遇到的问题,如何解决

一、npm是什么?

npm (npm package manager) ,node的包的管理工具,为javaScript开发者提供了一个分享代码的方式,同时也为开发者提供了一个在项目中代码重用的方式,用npm下载需要的包,就可以在自己项目中使用了,同时也提供了一个便捷的方式来管理不同版本的代码,为我们开发提高了效率,此解释仅代表个人意见。 官网入口

二、发布npm包 详细步骤

1.登录npm
1.打开命令行登录 Window+r 打开命令行 输入cmd

2.登录 npm login 如图下:

​​image.png

Username:账号 Password:密码 Email:邮箱 此时已经登录成功 接下载就可以编写要发布的包了

如果登录时遇到以下问题,可以去看一下博主的之前文章,有详细解决方案

2.编写发布npm包
第一步:创建一个发布包的项目

image.png

第二步:初始化包 npm init --- 按照如下一步步流程操作就可以哦~

image.png

第三步:创建好目录结构

image.png

src目录下的base.js内容如下:

const BaseMethods = {
  /**
   * 获取数据类型
   * @param params
   * @returns 'String','Number'...
   */
  getTypeOf: (params) => {
    let type = Object.prototype.toString.call(params);
    return type.match(/\[\w+\W(\w+)\]$/)[1];
  },
  /**
   * 数组,字符串去重
   * @param Array,String
   * @returns
   */
  unique: (params) => {
    if (this.getTypeOf(params) === "Array") {
      return [...new Set(arr)];
    }
    if (this.getTypeOf(params) === "String") {
      let obj = {};
      let str = "";
      for (let i = 0, len = params.length; i < len; i++) {
        if (obj[params[i]]) {
          str += params[i];
          obj[params[i]] = true;
        }
      }
      return str;
    }
  },
};

export default BaseMethods;

src目录下validare.js内容如下:

const Validate = {
  /**
   * 手机号校验
   */
  mobileCheck: (mobile) => {
    let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    return reg.test(mobile);
  },
};

export default Validate;

最后在入口文件导入就可以了 内容如下:

import BaseMethods from "./src/base";
import Validate from "./src/validate";

export default {
  BaseMethods,
  Validate,
};

3.发布npm包
在我们刚刚创建好的目录为例,在根目录打开cmd运行

发布包命令:npm publish

博主在发布包的时候遇到的问题,希望会帮助到你~~~

一:

image.png

报错原因是你第一次发布npm包 你的账号绑定的邮箱 没有授权 此时你打开注册邮箱时 npm官网给你发送的邮箱号码,看有没有如下图,如果有点击红色区域即可

image.png

如果你邮箱里面没有如上图,也没有关系,打开npm官网,按照如下操作一步步来

image.png

接下来之后如果有提示就按照提示,没有提示的话,你就从新修改你的邮箱,可以是原来你绑定的邮箱,一步步操作即可;

image.png

二:

image.png

报错原因keywords关键字重复 此报错解决方式是 修改你package.js里 keywords字段

image.png

如下图:就证明已经发布到npm上成功了!

image.png

接着我们到npmjs官网去搜索 就可以显示出来了,接着就可以下载使用了;

image.png

安装 npm install mylpackage-myl -S 就可以安装使用了

总结

此文章是npm发布包教程,为方便我们在开发中提高效果,可以使用npm把自己的包发布,发布后别人也可以使用,你也可以使用别人了,也利于版本更新,本文章就到此为止!希望有帮助到各位朋友,如果文章中有什么不足的地方请谅解,毕竟自己写的,不能与大佬相比较,此外有帮助到你,请为博主点个赞吧,我也会继续更新下去,感谢大家的支持!!!
下期再见~~~

目录
相关文章
|
1月前
|
前端开发 小程序 API
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
|
1月前
|
资源调度 小程序 前端开发
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
|
1月前
|
JavaScript Linux 数据安全/隐私保护
node内网安装npm私服以及依赖包上传发布verdaccio
node内网安装npm私服以及依赖包上传发布verdaccio
223 1
|
1月前
|
资源调度 小程序 前端开发
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
|
1月前
|
JavaScript
Nodejs 第七章(发布npm包)
Nodejs 第七章(发布npm包)
38 0
|
1月前
|
资源调度
#发布npm包遇到错误,因为用了淘宝镜像地址的原因的解决方法-403 403 Forbidden - PUT https://registry.npmmirror.com/-/user/org.cou
#发布npm包遇到错误,因为用了淘宝镜像地址的原因的解决方法-403 403 Forbidden - PUT https://registry.npmmirror.com/-/user/org.cou
227 0
|
1月前
|
JavaScript 前端开发
实现自动扫描工作区npm包并同步cnpm
前言 在开发一个多npm包的项目时,时常会一次更新多个包的代码,再批量发布到 npm 镜像源后。 由于国内网络环境的原因,大部分都会使用淘宝的镜像源进行依赖安装,为了确保发布后,通过淘宝源能够顺利的安装,通常会手动同步一下 cnpm sync vue react 但在一些大型的 monorepo 的多包工程里,手动输入包名是一件非常繁琐的事情,所以准备把输入的过程简化一下,改成自动扫描工作区的包名,然后自动同步。 进而有了这个工具 工具的使用 直接通过 npx 运行即可,将自动扫描所有的包
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
从0到1开发一个自己的npm包完整过程
创建自己的 npm 包涉及六个步骤:1) 注册 npm 账号;2) 使用 `npm init` 初始化项目,确保 package.json 的 name 唯一且 private 为 false;3) 开发项目,可封装 UI 组件、函数库或命令行工具;4) 本地调试,通过 `npm link` 在项目中测试;5) `npm login` 登录账号,可能需切换至官方仓库;6) 使用 `npm publish` 发布项目。注意版本号递增,无意义的包不建议发布。
39 2
从0到1开发一个自己的npm包完整过程
|
1月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
38 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
14天前
|
安全 JavaScript 前端开发
怎么发布npm包?
该文介绍了如何在JavaScript环境中发布npm包的步骤。首先,确保npm客户端配置使用官方源,以避免安全和兼容性问题。接着,登录npm账号。然后,检查`package.json`文件,其中包的`name`应唯一,版本号遵循语义化版本控制。更新版本号后,使用`npm publish`发布包。最后,通过在新环境中全局安装并测试包来验证发布是否成功

推荐镜像

更多