百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

什么是npm系列:三、如何发布自己的npm包

wxin55 2024-11-08 14:38 10 浏览 0 评论

读完本篇文章后,你可以学到”如何开发”、“如何配置”、”如何发布”,最终可以开发属于你自己的npm包。

1. 初始化npm

通过npm init命令可以创建初始项目,需要逐步完善一下信息:

package name: (npmtest)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

创建完package.json之后,我们就可以轰轰烈烈的写代码了。

2. 开发Tips

2.1 调试

开发中如何调试是一个痛点,很多人会把代码复制到node_modules中再调试结果,其实我们有更好的办法:”npm link”,使用流程如下:

  1. 在包根目录执行npm link
  2. 在项目中执行npm link package-name
  3. 这个时候在项目中实时访问到package-name

目前这种方式在yarn中无法使用。

3. 发布

3.1 创建/登录账号

首先需要在https://www.npmjs.com/signup注册账号。

完成之后在终端中执行npm login,输入账号密码之后即登录成功。

这里有一点需要注意,如果之前设置taobao源,需要修改为npm registry,可以使用如下指令还原:

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

但是鉴于实际情况,我们在taobao和npm源之间互相切换其实太麻烦了,比较好的解决方案就是配置package.json中的publishConfig字段,具体信息看下一段落。

3.2 package.json 配置

该项配置主要包含下面内容:

  • publishConfig
  • main
  • files

publishConfig

"publishConfig": {
 "registry": "https://registry.npmjs.org/",
 "tag": "beta",
 "access": "public"
}
  • registry 源地址
  • tag 发布对应的dist-tag标签
  • access 如果是scoped包,一定需要设置为public(付费用户除外)

main

包的入口文件,通常我们会指定为index.js。

files

我们需要控制npm包的大小,避免安装过程中花费太多时间。一般来说我们只输出编译过的内容、文档、样式等。

package.json的files字段的意思便是包含在项目中的内容,它允许设置为文件、文件名组成的数组。

除此之外,我们还可以在根目录或子目录下创建.npmignore文件,写法和gitignore一致。

当然为了完整性,有些内容是无法忽略的:

  • package.json
  • README
  • CHANGES / CHANGELOG / HISTORY
  • LICENSE / LICENCE
  • NOTICE
  • The file in the “main” field

下面这些内容是默认忽略的:

  • .git
  • CVS
  • .svn
  • .hg
  • .lock-wscript
  • .wafpickle-N
  • .*.swp
  • .DS_Store
  • ._*
  • npm-debug.log
  • .npmrc
  • node_modules
  • config.gypi
  • *.orig
  • package-lock.json

3.3 版本管理

版本号遵循语义化版本的规则,由MAJOR.MINOR.PATCH组成,在末尾还可以加上pre-release预发布版本号信息。

  • MAJOR:当你做了不兼容的 API 修改,
  • MINOR:当你做了向下兼容的功能性新增,
  • PATCH:当你做了向下兼容的问题修正。

版本号可以手动修改,也可以通过npm version命令自动修改:

// 初始版本号 v1.0.0
npm version patch
// v1.0.1
npm version prepatch
// v1.0.2-0
npm version minor
// v1.1.0
npm version major
// v2.0.0

npm version的完整命令如下:

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

如果我们要生成1.0.0-alpha.1风格的版本号,可以带上参数--preid:

npm version prerelease --preid=alpha

当我们执行了npm version之后,脚本会自动修改版本号,并在git中创建提交和标签,如果想要禁用该行为,可以传入--no-git-tag-version来阻止。

3.4 tag

npm的tag是用于标记不同用途的版本,一个npm包至少会有latest标签,我们可以根据测试版、预览版等不同需求定制标签。

比如如果我们有一个测试版本要发布,我们可以指定dist tag为beta:

npm publish --tag beta

当我们测试完成,准备正式发布的时候,就可以把beta对应版本号演进到latest上。

3.5 发布

当一切准备就绪之后,我们就可以进入发包的冲刺了。

npm publish

注意!可能有人说我为什么看到的只有错误,一般这个时候可以这样排查:

  • registry检查是否正确
  • 包名是否为@somescope/somepackagename形式,同时是贫穷玩家
  • 版本号是否未更新

如果包属于某个组织下,即@somescope/somepackagename形式的包名,执行命令需要调整为npm publish --access public。

经过千辛万苦之后,我们终于发布成功了,可是如果我们发现某个文件漏掉了,再发布一个版本也不太值得,我们就可以使用npm unpublish命令取消24小时之内发布的包,需要注意的是unpublish并不推荐使用。

4. 最佳实践

  • semantic-release 自动生成changelog以及版本管理
  • 代码规范+commit规范 magic-lint
  • cgr 切换npm、yarn源

5. 场景讲解

  • 每次发布操作流程
  • 移除tag

5.1 每次发布流程

  1. ?开发功能,并提交代码
  2. npm version major or minor or patch
  3. npm publish

5.2 移除tag

npm dist-tag rm <pkg> <tag>

相关推荐

ES6中 Promise的使用场景?(es6promise用法例子)

一、介绍Promise,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值,它有三种状态:pending待定,这是Promise的初始状态,它可能成功,也可能失败,前途未卜fulfilled已完成,这是一种成功的状态,此时可以获取...

Promise的九大方法(promise的实例方法)

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析(360前端开发面试题)

1.组件库按需加载怎么做的,具体打包配了什么-按需加载实现:借助打包工具(如Webpack的require.context或ES模块动态导入),在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具,它无论Promise是成功(fulfilled)还是失败(rejected)都会执行,且不改变Promise的最终结果。它的实现原...

最简单手写Promise,30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的,大部分对于新手还是比较难理解的,其中几个比较难的点:状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态,这个叫Re...

前端分享-Promise可以中途取消啦(promise可以取消吗)

传统Promise就像一台需要手动组装的设备,每次使用都要重新接线。而Promise.withResolvers的出现,相当于给开发者发了一个智能遥控器,可以随时随地控制异步操作。它解决了三大...

手写 Promise(手写输入法 中文)

前言都2020年了,Promise大家肯定都在用了,但是估计很多人对其原理还是一知半解,今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥,直接上图:Promise就是处理异步函数的API,它可以包裹一个异步函数,在异步函数完成时抛出完成状态,让代码结束远古时无限回掉的窘境。配合async/await语法糖,可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里,Promise一直是处理异步操作的神器。而现在,随着ES2025的发布,Promise又迎来了一个超实用的新成员——Promise.try()!这个新方法简...

一次搞懂 Promise 异步处理(promise 异步顺序执行)

PromisePromise就像这个词的表面意识一样,表示一种承诺、许诺,会在后面给出一个结果,成功或者失败。现在已经成为了主流的异步编程的操作方式,写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解(promise机制的实现原理)

一、Promise的核心状态机Promise本质上是一个状态机,其行为由内部状态严格管控。每个Promise实例在创建时处于Pending(等待)状态,此时异步操作尚未完成。当异步操作成功...

javascript——Promise(js实现promise)

1.PromiseES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎...

取消回复欢迎 发表评论: