前言


 怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述。要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手。于是,在博主的潜心钻研下,终于成功了!所以,我打算写一篇更为实用的、简洁但详细的、面向小白的教程供大家参考!

前提准备


  1. 要求会安装软件;
  2. 要求能配置环境变量;
  3. 要求会使用CMD;
  4. 要求会打开网页注册账号。

(只要你会以上技能,这里都可以看懂)

步骤简介


(从你需要开始的地方看)

详细过程


安装NodeJS


 下载安装包

到Node官网下载NodeJS,官网地址:https://nodejs.org/en/download/
根据自己的需要下载适当的安装包

 安装软件

  1. 双击NodeJS的Windows Installer 程序包文件;
  2. 点击Next;
  3. 先勾选I accept the terms in the License Agreement再点击Next;
  4. 此处可以根据个人需求修改安装目录(博主安装目录为E:\Nodejs),然后点击Next;
  5. 此处默认安装相关组件,点击Next;
  6. 点击Next
  7. 点击Install,等待安装完成最后点击Finish


 测试

  1. 组合键WIN+R,输入“CMD”打开CMD窗口。输入“node -v”后显示当前NodeJS版本,说明安装成功。输入“npm -v”后显示当前npm版本,说明自带的npm已经安装成功;
  2. 关闭CMD窗口。

    简单说明:新版的NodeJS已自带npm,安装NodeJS时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西。

 配置环境

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径 | 此处节省C盘空间会把模块全部安装到NodeJS的安装根目录下(博主为:E:\Nodejs)。

配置环境变量
  1. 在根目录下(博主为:E:\Nodejs)新建文件夹:node_globalnode_cache
  2. 以管理员身份打开CMD窗口,输入以下命令,没有回复即可!记得关闭窗口!
    npm config set prefix "E:\Nodejs\node_global"
    npm config set cache "E:\Nodejs\node_cache"


  3. 我的电脑-右键菜单-属性-高级系统设置-高级-环境变量
  4. 系统变量下新建:
    |变量名(N):|NODE_PATH|
    |变量值(V):|E:\Nodejs\node_global\node_modules|;
  5. 用户变量下的Path中,替换原来的值为:E:\Nodejs\node_global。千万别忘了点确定;

  6. 配置完后,安装个module测试下,我们就安装最常用的express模块,以管理员身份打开CMD窗口。
安装全局模块
  1. 输入如下命令进行模块的全局安装:npm install express -g(“-g”是全局安装的意思);
  2. 等待安装完毕。

注册npm账号


 打开官网 https://www.npmjs.com/signup

 自己按照提示注册一个账号,很简单。博主就不细讲了!

发布自己的包


制作包

  1. 先创建一个文件夹,名字为你的项目名。把你的项目全部移动到该文件夹下。然后以管理员身份运行CMD,并通过“cd+文件路径”命令进入该文件夹(不会的可以问度娘);
  2. 输入“npm init”命令初始化当前项目信息,建议直接输入“npm init -y”跳过此步,所有的设置默认!如果想改信息,直接在生的package.json 文件里改就好了;

    以下是部分参考信息:
{
  "name": "#####",             //包的名称  
  "version": "1.0.0",        //版本号  
  "description": "仅供测试,别下载",    //包的描述  
  "main": "index.js",                    //文件入口,默认是index.js,可修改 
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"    //测试命令,可以不填直接回车  
  },  
  "keywords": [  
    "测试"                                        //项目关键词,供搜索  
  ],  
  "author": "###",                            //作者名称  
  "license": "ISC",                            //包遵循的开源协议,默认是ISC  
  "dependencies": {}  
}

  1. 配置完成后会出现“is this OK?(yes)”字样,直接回车确认(如果你输入的是“npm init -y”则会直接生成package.json文件,组件信息在该文件里直接改就行了)。回车后回到文件夹,会多出来一个package.json,里面就是刚才填写的信息。至此,一个最简单的包已经做好了!

发布包

  1. 使用npm login命令登录自己注册的npm账户;
  2. 输入npm who is am i查看当前登录的是谁,确保已经登录;
  3. 最后,大胆的输入命令npm publish并回车。至此,你已经成功发布了自己的npm包!

附录


引用包

 要想调用自己的文件可以按照以下格式来访问 https://unpkg.com/包名(最外面那个文件夹的名字)+@+版本号/你要访问的文件在根目录下的相对路径

 例如:我在更目录文件夹名字是 test 里面有一个 readme.txt 文件和一个 forTest 文件夹。在 forTest文件夹下还有一个文件名为 README.txt。

 则readme.txt和README.txt的访问链接为:
https://unpkg.com/test@1.0.0/readme.txt
https://unpkg.com/test@1.0.0/forTest/README.txt

查看包

在登录状态下可以使用一下命令实现查看包:
  1. 1.查看对应包的所有版本 npm view 包名 versions

  2. 2.查看对应包的最新版本 npm view 包名 version

  3. 3.查看对应包的所有版本及详细信息 npm info 包名

删除包

想要删除对应版本的包可使用该命令:

npm unpublish 包名@版本

原创说明


作者:SeaFever
本文链接:https://www.cnblogs.com/seafever/p/12268128.html
转载请注明出处!
侵权必究!

使用npm发布、查看、引用、删除自己的包[小白推荐]的更多相关文章

  1. npm 发布到远程资源库

    一.npm 发布到远程资源库 1.创建package.json Package.json 属性说明 name - 包名. version - 包的版本号. description - 包的描述. ho ...

  2. vue2.0+ 从插件开发到npm发布

    vue: V2.5.11 此篇尽量详细,清楚的讲解vue插件的开发到npm的发布,想想将你自己做的东西展示给广大"网民",心里还是有点小激动的...-^_^ 先上一下插件效果图-- ...

  3. 我想写一个前端开发工具(一):在npm发布模块

    有必要说说我为什么要开始写这个,正文从下面的第一条开始 我最近忙于公司的项目,一直没有抽出时间来写文章.本来想每个月写一片文章,保质保量,无奈上个月没有坚持. 这段时间有点忙,主要是由于公司业务调整, ...

  4. 使用npm发布插件

    使用npm发布插件 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 npm是一个全球性的包管理工具,上面有着许许多多的前端 ...

  5. 在npm发布自己造的轮子

    提到封装组件,发布到npm,很多同学都会觉得很神秘.但其实,npm包无非就是我们平时写的比较独立且可复用的模块.当然,想要发布,除了基础组件的编写外,还要进行一些包装.下文通过一个简单的案例,和大家一 ...

  6. linux专题一之文件管理(目录结构、创建、查看、删除、移动)

    在linux系统中一切都是文件./ 在linux中为根目录,是一切文件的根目录.本文将通过linux系统的目录结构和与linux文件操作有关的相关命令(touch.mkdir.cp.mv.mv.les ...

  7. [05]Git查看、删除、重命名远程分支和tag

    Git查看.删除.重命名远程分支和tag 2015-06-15:加入姊妹篇: 2013-11-06:加入重命名远程分支的内容: 2013-01-09:加入删除远程tag的内容. 姊妹篇:使用Git.G ...

  8. npm 发布 vue 组件

    创建 vue 组件 1.创建vue项目,为了简洁方便,推荐使用webpack-simple构建一个项目 vue init webpack-simple your-project 2.在 src 目录下 ...

  9. Git查看、删除、重命名远程分支和tag【转】

    转自:http://zengrong.net/post/1746.htm 本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也 ...

随机推荐

  1. 牛客练习赛$48E$ 小$w$的矩阵前$k$大元素 堆

    正解:堆 解题报告: 传送门$QwQ$ 考虑把$b$从大往小排序,然后把$a_1+b_1,a_2+b_1,...,a_n+b_1$丢到堆里,顺便记录下$b$的下标 然后每次拿出一个最大值,设为$mx= ...

  2. Windows To Go 企业版2019 LTSC 开发环境部署

    Windows To Go 是一项非常实用的功能,与传统方式安装Windows 10相比更具有灵活性,会根据每次接入的硬件型号保留不同版本驱动. 由于博主是一名全栈程序员(截至发稿处于菜鸟级别),对灵 ...

  3. 洛谷P1220 关路灯 题解 区间DP

    题目链接:https://www.luogu.com.cn/problem/P1220 本题涉及算法:区间DP. 我们一开始要做一些初始化操作,令: \(p[i]\) 表示第i个路灯的位置: \(w[ ...

  4. 22.Python安装和卸载第三方模块方法

    安装和卸载第三方开源模块的步骤:下例,安装urllib3模块的步骤. 1.安装开源模块步骤: 按键盘windows键+r键,输出cmd回车.或开始->windows系统->命令提示符: 输 ...

  5. 2019 年 stackoverflow 网站最受欢迎的 20 个 Python 问题

    在最新一期的"Python开发者周刊"(Pycoder's weekly)里,我看到一则有意思的分享,故转出来分享给大家. 该分享来自是一份"python weekly ...

  6. Android Studio build不显示Generate signed apk问题

    如果是刚装的AS,那么新建一个项目,进入项目后,会发现build选项卡缺了一些选项,同时底部sync在转圈圈,其实是AS在自动下载gradle,也许还在下载build-tools,我等了11分钟才结束 ...

  7. es6 面向对象选项卡(自动轮播功能)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. react入门(六):状态提升&context上下文小白速懂

    一.状态提升 使用 react 经常会遇到几个组件需要共用状态数据的情况.这种情况下,我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理. 原理:父组件基于属性把自己的一个fn函数传递给子组 ...

  9. Asp.Net Core 学习教程1、初始.Net Core与VS Code 第一个web程序

    1..Net Core介绍 .NET Core是.NET Framework的新一代版本, 是微软开发的第一个具有跨平台(Windows.Macosx.Linux) 能力的应用程序开发框架,未来也将会 ...

  10. struct结构体 重载运算符

    struct node{ int x,y,z; }; bool operator<(node a,node b) { if(a.x!=b.x) return a.x<b.x; if(a.y ...