使用npm发布自己的组件包

Posted seafever

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用npm发布自己的组件包相关的知识,希望对你有一定的参考价值。

使用npm发布自己的组件包

前言

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

前提准备

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

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

步骤简介

  • 安装NodeJS
    • 下载安装包
    • 安装软件
    • 测试
    • 配置环境
      • 配置环境变量
      • 安装npm全局模块
  • 注册npm账号
    • 打开npm官网
    • 注册账号
  • 运行CMD控制台
    • 编写package.json文件
    • 上传组件包

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

详细过程

安装NodeJS

?下载安装包

到Node官网下载NodeJS,官网地址:https://nodejs.org/en/download/
根据自己的需要下载适当的安装包(例如:博主使用的是Windows10 x64位操作系统,所以应该下载Windows Installer(.msi) 64-bit安装文件)

?安装软件

  1. 双击NodeJS的Windows Installer 程序包文件;

  2. 点击Next;

  3. 先勾选I accept the terms in the License Agreement再点击Next;

  4. 此处可以根据个人需求修改安装目录(博主安装目录为:D:Develop odejs),然后点击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的安装根目录下(博主为:D:Develop odejs)。

  1. 在根目录下(博主为:D:Develop odejs)新建文件夹:node_globalnode_cache

  2. 以管理员身份打开CMD窗口,输入以下命令,没有回复即可!
    npm config set prefix "D:Develop odejs ode_global"
    npm config set cache "D:Develop odejs ode_cache"

  3. 我的电脑-右键菜单-属性-高级系统设置-高级-环境变量

  4. 系统变量下新建:
    |变量名(N):|NODE_PATH|
    |变量值(V):|D:Develop odejs ode_global ode_modules|;

  5. 用户变量下的Path中,替换原来的值为:D:Develop odejs ode_global

  6. 配置完后,安装个module测试下,我们就安装最常用的express模块,以管理员身份打开CMD窗口;

  7. 输入如下命令进行模块的全局安装:npm install express -g(“-g”是全局安装的意思);

  8. 等待安装完毕;

注册npm账号

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

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

重点部分

?先创建一个文件夹,名字为你的项目名。把你的项目全部移动到该文件夹下。然后以管理员身份运行CMD,并通过“cd+文件路径”命令进入该文件夹(不会的可以问度娘)。

?输入“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":?{}??
}

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

?使用npm login命令登录自己注册的npm账户

?输入npm who is am i查看自己已经登录

?最后,大胆的输入命令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

原创说明

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

以上是关于使用npm发布自己的组件包的主要内容,如果未能解决你的问题,请参考以下文章

发布自己的npm包

使用脚手架 快速开发 React组件 npm包 (基于TSDX)

npm install下来的包到底怎么来的?难怪npmjs上会有这么的库!手把手教你做一个完全属于你自己的npm组件库!

npm install下来的包到底怎么来的?难怪npmjs上会有这么的库!手把手教你做一个完全属于你自己的npm组件库!

VUE组件制作成npm包,上传和使用

无法从 npm 包中导入 vue 组件