第一次发布自己的npm包

2023-10-31

背景

在做表单的时候,会遇到很多的表单项的验证工作,几乎很多验证都是重复的,有一个比较好的lodash库来做了这些工作,但是里面有些方法与自己的期望不符。比如,lodash.isEmpty(2) // true是会认为是空的。这显然与实际的业务是不符的。另外还有一些数字校验等其他的常用的校验方法,想结合lodash做一个自己的库,这样比较有利于业务的开发。

基于以上的考量,准备开一个自己的jsUtils库。

实践

0. 什么是npm?

npm是javascript的包管理工具,是前端模块化下的一个标志性产物
简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率

  • 1.从社区的角度:把针对某一特定问题的模块发布到npm的服务器上,供社区里的其他人下载和使用,同时自己也可以在社区里寻找特定的模块的资源,解决问题
  • 2.从团队的角度:有了npm这个包管理工具,复用团队既有的代码也变的更加地方便

1. 新建个npm账号

npmjs上注册一个自己的账号。

点击创建账号注册一个自己的账号。

image.png

2. 项目初始化

新建一个项目,cd进去,然后执行npm init来初始化项目的配置。

在执行npm init之前,有两点需要我们注意一下:

  • 包名不能重复
  • npm对包名的限制:不能有大写字母/空格/下划线

我们首先要验证一下我们即将要起的包名是否存在。验证我们即将要起的包名是否存在的方式有两种:

    1. npm仓库中输入一下“我们即将要起的包名”,看是否可以查找到。like:
      search1.gif
    1. 直接使用npm install <packagename>,如果能够下载下来,那么说明这个包名在npm仓库是存在的,也就是不可使用的。

这样提前验证一下,能够避免一些发布(npm publish)时会出现的这个错误。

publish-error

这个错误就是说,npm仓库中已经存在这个包名的库了,我没有权限去发布。

配置项:

配置项 意义 默认值 备注
name 填写你这个包的名字 默认是你这个文件夹的名字 不过这里要着重说一下,最好先去npm上找一下有没有同名的包。最好的测试方式就是,在命令行里面输入npm install 你要取的名字,如果报错,那么很好,npm上没有跟你同名的包,你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸,改名字吧。。。
version 你这个包的版本 默认是1.0.0
description 项目描述
entry point 入口文件 默认是Index.js 你也可以自己填写你自己的文件名
test command 测试命令
git repository 这个是git仓库地址 如果你的包是先放到github上或者其他git仓库里,这时候你的文件夹里面会存在一个隐藏的.git目录,npm会读到这个目录作为这一项的默认值。如果没有的话,直接回车继续。
keyword 这个是一个重点,这个关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。
author 作者 写你的账号或者你的github账号吧
license 执照 这个直接回车,开源文件来着。。。

然后它就会问你Are you ok?

回车Ok!
然后我们回到我们的文件目录里面去看一看,发现多出来一个package.json文件,点进去基本上就是下面这张图输出的信息。

{
  "name": "jsutils-100",
  "version": "1.0.1-alpha.2",
  "author": "spring.hehe.v5",
  "dependencies": {
    "lodash": "^4.17.10"
  },
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^23.5.0"
  },
  "description": "在 lodash 基础上扩展的一些 jsUtils",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/springHyc/jsUtils.git"
  },
  "keywords": [
    "jsUtils"
  ],
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/springHyc/jsUtils/issues"
  },
  "homepage": "https://github.com/springHyc/jsUtils#readme"
}

3. 写项目

首先入口文件是index.js,或者是你刚才修改了那个entry point的值,那么你这个文件名也跟着改为那个值。

image.png

因为我把封装好的代码都放在了src里面,所以,index.js里面也就一句话:

module.exports = require("./src");

而大多数我们常见npm包里面写的是module.exports=require('./lib')

然后写个readme.md文件。一般这个readme.md文件都是该项目的一些说明,比如可以放一些项目的启动命令、构建命名等等。

CommonJS标准
我们看到上面代码中使用CommonJS标准。一个单独的文件就是一个模块,模块内将需要对外暴露的变量放到exports对象里,可以是任意对象,函数,数组等,未放到exports对象里的都是私有的。用require方法加载模块,即读取模块文件获得exports对象。这里出现的module,exports,require是JS的新语法吗?不是新语法,只是CommonJS的语法糖。

路径的引用:
var Hi = require('./hi');这种是用require加载时写的是相对路径,让Nodejs去指定路径下加载模块。如果省略相对路径,默认就会在node_modules文件夹下找hi模块,那很可能因为找不到而报错。

4. 发布

4.1 添加账户

使用npm adduser命令来添加npm的账户名、密码和邮箱即可。like:

npm adduser

上图是添加成功的截图。

4.2 发布

就可以执行npm publish命令进行发布啦。下面就是见证奇迹的时刻啦,出现截图中的样子就是发布成功啦。

npm publish

希望对你们有所帮助!

下面是我在发布jsutils-100包时遇到的一些问题的记录,在实际发布包时,很可能你写的是es6语法的code,那么你就需要进行一下转换才行啦。

4.3 更新npm发布后的包

更新npm包也是使用npm publish命令发布,不过必须更改npm包的版本号,也就是package.json中的version字段,否则会报错,like:
npm-publish-error

在这里顺便说一下有有关版本的小知识点- npm的版本控制

4.4 npm的版本控制

在我们的package.json里面有一个version字段。那么,怎么在项目不断构建的过程中调整版本呢?
npm有一套自己的版本控制标准——Semantic versioning(语义化版本)

具体体现为:

版本格式:主版本号.次版本号.修订号,版本号递增规则如下:

主版本号:当你做了不兼容的 API 修改,
次版本号:当你做了向下兼容的功能性新增,
修订号:当你做了向下兼容的问题修正。

例如:我原本的项目是1.0.0版本的话
若是1中情况,变为1.0.1
若是2中情况,变为1.1.0
若是3中情况,变为2.0.0

通过npm version <update_type>自动改变版本
update_type为patch, minor, or major其中之一,分别表示补丁,小改,大改。

备注
语义化版本号可以在这里详细学习

4.5 利用npm撤销发布包

这里要说一点,取消发布包可能并不像你想象得那么容易,这种操作是受到诸多限制的,撤销发布的包被认为是一种不好的行为
(试想一下你撤销了发布的包[假设它已经在社区内有了一定程度的影响],这对那些已经深度使用并依赖你发布的包的团队是件多么崩溃的事情!)

如果发现已经发布的版本有问题,可以进行撤销操作:npm unpublish <packagename>@<version>
如果有权限问题,撤销不了,可以添加--force

撤销还是有诸多限制的:

    1. 根据规范,只有在发包的24小时内才允许撤销发布的包( unpublish is only allowed with versions published in the last 24 hours)
    1. 即使你撤销了发布的包,发包的时候也不能再和被撤销的包的名称和版本重复了(即不能名称相同,版本相同,因为这两者构成的唯一标识已经被“占用”了)

like:刚刚发布的jsutils-100@1.0.1-beta.4其实是我用来测试的,里面并没有修改任何code,现在进行一下撤销。like

unpublish

现在我准备再重新发布jsutils-100@1.0.1-beta.4这个版本你的包,like:

版本被占用

遇到的问题

由于我采用的es6的语法,直接发布没问题,但是应用到项目中,项目打包发布时就会出现语法错误。

image.png

出错的地方就就是es6的...目前不能用到对象中。like this:

image.png

所以需要引入babel来将es6转化一下,一开始只用的babel-preset-es2015这个的转化还是不行,仍然是报错,最终使用的转化强度更大的babel-preset-stage-0来能够彻底转化。

like:

image.png

遗留问题

  1. 发布时,是发布的lib下的转化文件,那么需要添加一个package.json文件才能发布的,每次手动添加总是麻烦,准备写一个命令才搞定。期待中… 也是自己向【大前端】迈进的第一步,come on !!!

  2. 为什么项目中需要使用

const lodash = require("lodash");
const jsUtils = {};
module.exports = jsUtils;

这样的方式来组织文件呢?为什么用import lodash from "lodash"在执行npm test时会报错呢?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

第一次发布自己的npm包 的相关文章

  • JS正则表达式验证是否为11位有效手机号码

    最近在做注册登陆页面 都要涉及到验证11位有效手机号码 这里贴出代码 希望能帮到有这个开发需求的朋友 function isPoneAvailable poneInput var myreg 1 3 4 5 7 8 0 9 9 if myr
  • 实现迷你版vue2的响应式核心原理代码

    vue2 的响应式核心原理代码 其实就只有几个模块 1 代理 Object defineProperty 2 依赖收集dep 收集所有监听页面数据的watcher实例 3 监听页面数据实例 watcher 4 观察者 Observer 实现
  • JavaScript笔记:函数作用域和块作用域

    1 函数中的作用域 考虑如下的代码 function foo a var b 2 一些代码 function bar 更多的代码 var c 3 在这个代码片段中 foo 的作用域中包含了标识符 a b c 和 bar bar 拥有自己的作
  • 电脑只能登录微信?但却打不开网页?不能上网怎么办?ip地址和DNS出问题了无法上网怎么办?

    描述一下问题 昨天使用了一些代理梯子 直接关机 没有关闭那个软件 今天打开电脑就出问题了 只能登录微信 但却打不开网页 今天查了很多资料都没有解决 花了2个多小时 终于可以上网了 解决办法 找到 控制面板 网络和Internet 里面的 网
  • Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by serv

    node 使用mysqljs链接Mysql数据库时报以下错误 原因是mysql8 0更改了密码默认的认证插件为Caching sha2 password 原来是mysql native password 更改密码为mysql native
  • 7个步骤让PC网站自动适配手机网页

    传统的网站如何完成向移动设备的快速转型 通过移动适配技术可以实现 切图网是国内首家基于web技术服务的公司 而移动适配主要通过底层的web技术开发手段来完成 下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃 1允
  • VUE 自定义 穿梭框

    某次项目要使用穿梭框进行数据选择 项目使用的element ui框架 框架中的穿梭框是这样子的 好像不能满足我的需求 因为需要展示很多内容 包括图片等信息 也要加上很多样式等等 我尝试这去改造 一会后觉得还是自己动手去写一个靠谱 几经鼓捣效
  • CSS之Sass中的@mixin和@extend,使用详细(Sass中@mixin和@extend的区别)

    简介 mixin 该指令用于定义可重用的代码块 可以在需要的地方进行调用 通过 mixin指令 你可以将一组样式代码封装成一个mixin 并在需要的地方使用 include指令来调用这个mixin 这样可以避免重复编写相同的样式代码 提高代
  • Vue3打包后无法运行

    描述 使用Vue3打包项目后 使用Live Server打开无法运行 放到服务器上也是一样 如图所示错误 分析 错误提示为js文件未找到 所以可能是路径的问题 关于Vue公共基础路径问题 https cn vitejs dev guide
  • 实现Vue高德地图多边形编辑器吸附功能

    前言 之前做的高德地图多边形编辑器吸附功能 最近出现不能编辑 在修改的过程中顺便记录一下 实现效果 安装 npm i amap amap jsapi loader save 核心代码
  • 在vue3项目中使用新版高德地图

    高德开发平台 高德开放平台 高德地图API amap com 1 首先你要注册好账号登录 2 获取key和密钥 自2021年12月02日升级 升级之后所申请的 key 必须配备安全密钥 jscode 一起使用 NPM方式安装和使用 基础版
  • css圆角容器改变背景色时圆角失效

    圆角的容器 改变背景色时 新背景色却并不是圆角 而是填充的直角 解决办法 给容器加样式 overflow hidden
  • UniAPP布局

    uniapp建议使用flex布局 首先定义flex容器 display flex flex容器按主轴排列填充 支持横向 纵向排列 flex属性如下 flex direction排列方向 flex direction row flex wra
  • css3设置背景图片的大小

    background size 设置背景图片的大小 以长度值或百分比显示 还可以通过cover和contain来对图片进行伸缩 语法 1 background size auto 默认值 不改变背景图片的高度和宽度 2 background
  • web前端开发自学书籍推荐这5本

    JavaScript权威指南 第6版 淘宝前端团队翻译的 看译者列表都是一堆大神 这本书又叫犀牛书 号称 Javascript 开发者的圣经 网上对此书评价很多 大概意思都是说这本书是一本 JavaScript 文档手册 没有完整看过一遍此
  • CSS动画:Transition与Animation

    本文总结CSS3中两个用来做动画的属性 一个是transition 另一个是animation 差异比较 CSS3 差异 transition 在给定的持续时间内平滑地更改属性值 从一个值到另一个值 也就是只需要指定开始与结束的参数 参数改
  • 点击echarts柱状图动态改变数据项颜色样式

    首先附上参考文章连接 https blog csdn net weixin 42870683 article details 103528254添加链接描述 今天来实现点击echarts柱状图 动态改变柱状图数据项颜色样式的案例 只要认真做
  • 彻底理解js中的闭包

    闭包是js的一个难点也是它的一个特色 是我们必须掌握的js高级特性 那么什么是闭包呢 它又有什么用呢 我们都知道 js的作用域分两种 全局和局部 基于我们所熟悉的作用域链相关知识 我们知道在js作用域环境中访问变量的权利是由内向外的 内部作
  • SyntaxError: Unexpected end of JSON input解决方法和思路

    最近在写一个前后台交互的需求 前台点击编辑按钮 直接报错 SyntaxError Unexpected end of JSON input 网上查了下基本都是 一般 双引号 单引号 未成对输入时导致报错 但是我这边没法解决 重新检查了Jav
  • React 教程及其API接口文档

    React 详细中文开发文档 可以阅读 http reactjs cn react docs tutorial html 英文原文 http facebook github io react 中文论坛 http react china or

随机推荐

  • 2020年,Java 开发者必须了解的 16 个Java 顶级开源项目

    2020年 值得你关注的16个Java 开源项目 本文已经收录自笔者开源的 JavaGuide https github com Snailclimb JavaGuide Java学习 面试指南 一份涵盖大部分Java程序员所需要掌握的核心
  • linux qt读写文件,QT 文件读写操作

    include include 1 打开文件 QFile f fn fn可以是一个相对路径或绝对路径 f open IO 一般不要IO ReadWrite 很容易出现赃数据 如果要在文件的后面添加内容要IO WriteOnly IO App
  • C/C++动态分配内存的几种方法

    使用C C 编程时 会经常动态分配内存 以便合理使用内存 本文主要讲述动态内存分配的几种方法及一些原理 理解不深刻之处欢迎指教 引言 为什么要进行动态内存分配 以数组为例 数组元素在内存中存储的地址是连续的 声明一个数组后 该数组需要的内存
  • 微信小程序设置背景图片

    var src1 images index wx56 png let src11 wx getFileSystemManager readFileSync src1 base64 var src111 data image jpg base
  • IntelliJ IDEA查看指定文件的文件类型、修改文件类型、解决无法正确识别文件类型的问题

    如下图 有时候明明创建的文件后缀名为 xml 可是点进去确是文本文件 一开始实在是觉得匪夷所思 那如何让编辑器识别他是xml文件呢 首先File Settings 然后 这里我要把RoleMapper xml识别为xml文件 编辑器提示Ro
  • windows下prometheus+mysqld_exporter+granafa监控mysql

    一 安装prometheus 可以从官网下载 也可以从github下载 从github下载快一点 官网 https prometheus io download github https github com prometheus prom
  • Python记1(输入/出,字符,数据类型,运算符,语句,with

    目录 1 杂 2 输入 输出 3 特殊字符 转义字符 5 数据类型 5 1数据类型转化 6 运算符 7 语句 7 1 条件分支 if elif elif else 7 2 条件表达式 7 3 循环while for 7 4 上下文管理类型
  • React中组件懒加载的使用

    为什么要使用懒加载 减少了应用启动时间 页面的加载速度变快 提升用户体验 懒加载 页面首次打开 不加载在路由中设置为懒加载的组件 只有用户在实际使用中 使用到了这个组件 才会开始加载 实现代码 import React lazy from
  • VMware Workstation Player与VMware Workstation Pro的区别

    linux开发与学习 免不了安装虚拟机 想想自己最开始只有一台电脑 为了体验最有滋味的linux 划重点 直接装了个双系统 之后就是各种苦不堪言 在ubuntu学着做着 为了个工具不得不关机重启回到windows 过了一分钟 切到windo
  • JS高级(4)函数高级 — 闭包

    闭包 循环遍历 给每个按钮都绑定上单击响应函数 var btns document getElementsByTagName button for var i 0 i lt btns length i 这样写会有一个问题 btns是一个伪数
  • 什么是区块链?区块链详解

    区块链简介 什么是区块链 目前没有看到很好的定义和介绍 网上要么是讲一些区块链意义的空泛文章 比如 区块链技术颠覆谁谁谁 又或 互联网已颠覆世界 区块链要颠覆互联网等等 要么就是通篇介绍比特币 矿工 挖矿等 那么区块链到底是个什么东西 它跟
  • python bottle 制作表单_使用Bottle(Python)的AJAX提交表单

    我在使用Bottle框架进行 AJAX通信时遇到了一些问题 这是我第一次使用AJAX 所以我可能只是错误的基础知识 希望瓶子 AJAX大师可以指出这个新手正确的方向 这是我正在使用的代码 usr bin env python from bo
  • dm9000网卡,uboot代码分析

    uboot移植 九 移植网卡DM9000 一 原理 TQ210 板载的网卡芯片是 DM9000A 接在 S5PV210 的 SROM 控制器的 BANK1 上 S5PV210 的 SROM 控制器支持 8 16 位 NOR Flash PR
  • 人工智能数学基础6:极限、极限运算、ε-δ语言、ε-N语言、级数和函数连续性

    老猿Python博文目录 一 极限的定义及四则运算 极限 某一个函数中的某一个变量 此变量在变大 或者变小 的永远变化的过程中 逐渐向某一个确定的数值A不断地逼近而 永远不能够重合到A 永远不能够等于A 但是取等于A 已经足够取得高精度计算
  • framebuffer驱动详解

    裸机中如何操作LCD LCD的显示原理 DDR中分出一块内存 将要显示的内容放到显存中 硬件自动将显存数据放到驱动器中 驱动器操控LCD显示内容 裸机操作LCD的方法由LCD的本身的工作原理决定 OS下操作LCD的难点 内核 驱动 做底层硬
  • c++中数组的使用

    在c 中 有三个强而有力的工具 分别是数组 指针还有字符串 可以说 没有熟练掌握这三个工具的不能算是一个合格的程序员 1 数组 数组 实际上就是向系统申请一个连续的内存空间 每个内存空间的地址连续 并且大小相同 关于数组的声明 语法如下 类
  • Object类、String类、字符串、异常

    快捷键 再IDEA中查看JDK的源代码 ctrl 7 查看一个类的所有方法或者属性 alt 7 快捷生成toString方法 alt insert enter 一 Object类 Object类是参数的最高统一类型 1 1 Java lan
  • Unity发布抖音小游戏:SDK接入

    上篇介绍Unity小游戏发布抖音平台的开发者账号注册以及小游戏创建和申请 本篇介绍字节SDK接入Unity游戏项目中 接入参考教程 Docs 下载bgdt package包 并导入Unity项目工程 打开ByteGame菜单 弹出字节工具面
  • NumPy库的学习

    本文主要记录的是笔者在B站自学Numpy库的学习笔记 引入numpy库 import numpy as np 矩阵的创建 创建一个二行三列的矩阵 array np array 1 2 3 2 3 4 查看array的行数 形状 元素数量 p
  • 第一次发布自己的npm包

    背景 在做表单的时候 会遇到很多的表单项的验证工作 几乎很多验证都是重复的 有一个比较好的lodash库来做了这些工作 但是里面有些方法与自己的期望不符 比如 lodash isEmpty 2 true是会认为是空的 这显然与实际的业务是不