当前位置:首页 > 技术分析 > 正文内容

还没有开始用自己的npm包吗,简单几步就搞定了

ruisui883个月前 (01-26)技术分析23

准备工作

npm是一个辅助前端开发的包管理工具。主要设计到两个概念package和module,可以这样理解,一个JavaScript软件,从本地发布到npm仓库时是package,从npm仓库下载到本地时就变成了module。如果要发布自己的包到npm,我们需要注册npm账户。在npm上注册一个账号是很简单的,需要填一下用户名密码邮箱,然后会收到一封邮件,进邮箱验证邮件的真实性。否则发布会报错。

创建包

创建package.json文件

新建一个wave-test文件夹,在文件夹中执行npm init,按照提示一步一步继续就可以了,最后在文件夹生成一个package.json文件,如果该文件夹是一个git仓库,它会提示一步步填上对应的repository相关的地址,这个将来发布到npm上的时候会在相应的页面上显示。

{
  "name": "wave-test",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "wavesnow",
  "license": "MIT"
}

创建一个入口文件index.js

我们按照默认的创建一个index.js文件,写一个测试方法getRandomNumber。

(function () {
  'use strict';
    function getRandomNumber() {

        var random = Math.floor(Math.random() * 100);
        if (random >= 100)
            throw new Error("Error");
        return random;
    }
    exports.getRandomNumber = getRandomNumber;
  }());

创建README.md文件

这个文件将来也会将内容显示到发布的npm包所在的页面,用来帮助用户理解说明你发布的包。

发布包

不带命名空间的包

有了上面三个个文件,我们就可以发布npm包了。依次执行下面几个命令,登陆后还需要输入密码及发布用的邮箱,该邮箱会公开。

## 登陆
npm login

## 发布
npm publish

带命名空间的包

如果想发布带命名空间的包,有scope的,那首先应该先去npm网站创建一个组织,这个组织的名字就是一个scope,以发布open的scope为例,后面需要修改一下这个package.json文件,比如申请的scope是myscope,那上面的package文件需要将名字这块做一个修改,其他可以不用动。

{
  "name": "@myscope/wave-test",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "wavesnow",
  "license": "MIT"
}

这种包发布的时候,需要加入一个参数--access public,发布私有scope的,访问限制私有的包npm需要收费。

npm publish --access public

使用

和其他包使用是一样的。现有一个测试工程。创建一个test-mypackage文件夹,安装我们的包

mkdir test-mypackage && cd test-mypackage
 
npm init -y

npm i wave-test

然后创建一个index.js文件,引入我们的包

let test = require('wave-test');
test.getRandomNumber();

运行index.js,

node index.js

更新

一个npm包发布之后,我们难免会修改一些bug,或者增改一些功能,这就涉及到对npm包的迭代。其中会涉及到到两个方面,内容的变更和版本的变更。npm采用语义化版本,共三位,以’.’隔开,从左至右依次代表:主版本(major)、次要版本(minor)、补丁版本(patch)。

## 变更版本号的命令
npm version 

比如我们执行命令:

npm version minor

package.json中的version变为0.1.1,然后执行发布命令就可以了。

项目中更新对这个包的引用,可以执行

npm up wave-test

废弃或删除

npm包发布后可以对包进行废弃或删除操作。废弃不会将包或版本从npm仓库删除,仍然可以继续下载安装,并在安装的时候会有警示。删除会将包从npm彻底删除,无法被下载安装。无论是废弃还是删除,都包含两个层面:

  • 版本的废弃/删除,鼓励用户更新最新版本
  • 包的废弃/删除,此包内容已经过时,没有了维护的价值

废弃

语法:npm deprecate [@] ,我们以wave-test为例:

## 废弃指定版本
npm deprecate wave-test@0.0.1 'deprecate reason'

## 废弃指定的包
npm deprecate wave-test 'deprecate reason'

执行后我们用npm view wave-test versions查看版本,记录的版本号并无变化。废弃的包除了安装时会有警示,并不影响使用。

删除

npm不鼓励任何形式的删除,主要因为我们发布的包可能已经被其他人引用,如果我们删除了此包,其他人在重新安装含有我们包的依赖的工程时,出现找不到包问题。

## 任意目录下删除包
npm unpublish wave-test --force

## 开发目录下删除当前版本
npm unpublish --force

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/542.html

标签: 卸载npm包
分享给朋友:

“还没有开始用自己的npm包吗,简单几步就搞定了” 的相关文章

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

作者:xuying 全栈修炼转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ前言Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。本篇文章总共分两部分,望小伙伴们认真阅读。下一篇:10...

抖音 Android 性能优化系列:启动优化实践

启动性能是 APP 使用体验的门面,启动过程耗时较长很可能使用户削减使用 APP 的兴趣,抖音通过对启动性能做劣化实验也验证了其对于业务指标有显著影响。抖音有数亿的日活,启动耗时几百毫秒的增长就可能带来成千上万用户的留存缩减,因此,启动性能的优化成为了抖音 Android 基础技术团队在体验优化方向...

7 招教你轻松搭建以图搜图系统

作者 | 小龙责编 | 胡巍巍当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择一张图片到库中进行搜索,并得到与其相似的若干图片。Milvus 作为一款针对海量特征向量的相似性检索引擎,旨在...

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时,任何类型的游戏都需要Flash。但随着 HTML5 发展,HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏,它们可以在所有现代浏览器中运行,并且只使用web技术构建。1. HexGL地址:http://...

再来一波黑科技工具,低调使用

静读天下静读天下是一个特别优秀的电子书阅读器。它上面有多个在线书库,像古登堡计划,很多种优秀的书杂志,都可以下载来阅读。它还能智能识别章节功能,还支持外置的语音阅读功能。它支持多种文本格式,比如说txt,pdf,epub,mobi等等。为了便于阅读它还有10 种配色方式,还有夜间模式。不过免费版有广...

Vue从入门到实践 丨Vue-router基本使用

1. 什么是 vue-routervue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址:https://router.vuejs.org/zh/2. vue-router 安装...