简要:这篇文章介绍了如何讲自己的包发布到NPM上,马克一下,将来有用

。。。

npm包发布

发布npm包,更方便以后下载使用。

我们已经把插件代码上传到github上面了,那么我们是否可以也做成一个npm包发布到npm上呢?答案是肯定的,如此一次,我们在需要使用到该插件的时候就可以直接npm i vpay等的实现安装到我们的项目中,岂不是很方便呢?

正如文章刚开始提到的文件目录,我们是把插件都写在了第二个lib中的。而整个vpay文件夹都是我们要作为npm包发布的。其中readme.md是说明文档,跟github上的一样,你可以简单的先拷贝根目录下的那个。

然后是vpay文件下面的index.js,里面就依据代码,即导出我们的插件:

module.exports = require('./lib')

由于我们在使用插件的时候, 其实引入的就是这个index.js,所以在这个文件中,我们导出了我们的插件。

而下面重点要说的是这个package.json文件,这个一开始是没有的,这是npm包的配置文件。我们要首先进入vpay文件夹的位置,然后终端运行**npm init**命令来初始化一个npm包配置文件,此时他会问你一些列问题来完成配置文件:

  • name:包名,默认是文件夹名。但是这个名字是需要唯一的,如果你命的名字已经被使用过了,那就只能换个名字。至于怎么查看包名是否存在,你可以去npmjs官网搜索你的包名,如果没搜索到则可以使用。

  • version:包的版本,默认是1.0.0, 你可以更换,例如0.1.0或2.0.1等。

  • description:包的描述。主要描述你的包是用来做什么的。

  • entry point:包入口文件,默认是Index.js,可以自定义。

  • test command:测试命令,这个直接回车就好了,因为目前还不需要这个。

  • git repository:包的git仓库地址,npm自动读取.git目录作为这一项的默认值。没使用则回车略过。

  • keyword:包的关键词。该项会影响到用户怎样才能搜到你的包,可以理解为搜索引擎悠哈的关键词。建议关键词要能准确描述你的包,例如:"vpay vue-pay vue-password password"

  • author:作者。例如你的npm账号或者github账号

  • license:开源协议,回车就好。

到这一步,其实我们已经做好了本地包的开发,我们要测试一下包能不能使用。怎么测试呢?我们知道,平时是使用npm安装插件的时候,其实是把插件安装在了根目录下的node_modules文件中。那么,我们既然已经开发好了本地包,我们就把这个vpay文件夹直接拷贝到node_modules文件夹中。然后在main.js中像平时一样使用插件:

// 直接引入vpay,不需要写路径

import vpay from 'vpay'

Vue.use(vpay);

测试一看,一切正常,说明我们的包是没问题的。

下面就是要发布了。发布之前,我们首先要有一个npm的账号,如果你还没有账号的,自行去npmjs官网注册一个账号,这里提示一下,注册用户名的时候经常可能不通过,所以还是字母开头加一些数字方便些。这里的full name 可以理解为昵称,email邮箱,后面两个是用户名和密码。有些时候用户名总是会提示不合规范,所以还是字母加数字快些。

回归正题,先切换到我们的vpay文件目录,然后执行npm login命令登录我们的npm账号,他会提示你输入npm的用户名和密码,注意输入密码的时候不会有任何提示,这里不要以为是不是没有反应。你只管输入就好,只不过什么都看不到,输入完成回车,然后输入npm的邮箱。最后回车,这里有一点要注意的,如果你是之前安装了淘宝镜像,那是不会成功的,因为你的要把npm包发布到npm镜像上,而不是淘宝的镜像。我们平时可以通过淘宝镜像来加快下载速度,因为淘宝镜像其实就是每隔十分钟把npm的上的最新资源同步到自己身上而已。所以你要通过npm的镜像登录和发布。

如果配置了淘宝镜像,先设置回npm镜像:

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

然后在终端执行npm login命令:

看到最后一行Logged in as ……就说明登录成功了。

登录成功后,运行npm publish命令将npm包发布到npm上。

这样就发布成功了。我们去npm官网查一下我们的包:

如果发布成功后没有搜到,就稍微等几分钟。

击进去看下,一切正常。以后就直接可以通过npm i vpay将插件撞到我们的项目中了。

到这,我们基本已经完成了插件从开发、到写说明文档、再到发布github、最后发布npm包,一切已经可以正常使用了。插件的个别地方的样式有些略显粗糙,但是本文的主要目的在于演示插件的开发过程。希望能对有需要的小伙伴起到帮助。

如何发布到NPM上(转)的更多相关文章

  1. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  2. 创建一个自己的Vue UI组件库,并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  3. 如何手写一个js工具库?同时发布到npm上

    自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...

  4. Ionic 发布可重用代码到NPM上

    1.首先下载可重用模板 https://github.com/ionic-team/ionic-module-template 2. 将模板改包名后发布到NPM上 如果你没有NPM账号,先进行注册. ...

  5. 使用yeoman搭建脚手架并发布到npm

    前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...

  6. 将 Vue 组件库发布到 npm

    制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...

  7. 80行代码教你写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...

  8. 开发属于自己的包,并上传到npm上

    1.DIY开发包 1.1符合标准的包结构 一个规范的包,它的组成结构,必须符合以下3点要求: 包必须以单独的目录而存在 包的顶级目录下,必须包含package.json这个包管理文件 package. ...

  9. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

随机推荐

  1. HDU 3763 CD【二分查找】

    解题思路:给出两个数列an,bn,求an和bn中相同元素的个数因为注意到n的取值是0到1000000,所以可以用二分查找来做,因为题目中给出的an,bn,已经是单调递增的,所以不用排序了,对于输入的每 ...

  2. ZBrush2018中文版全球同步发售,终身授权

    ZBrush 2018于2018.3.28发布了!这个我们期待已久的2018新版本等了几年,它终于来了! 不负众望,ZBrush 2018的这一次更新,简直炸裂,新功能真是太好用了!2018版是ZBr ...

  3. LeetCode Golang 9.回文数

    9. 回文数 第一种办法 :itoa 转换为字符串进行处理: package main import ( "strconv" "fmt" ) //判断一个整数是 ...

  4. SpringMVC框架入门

    简介 SpringMVC采用模型(Model)-视图(View)-控制器(controller)的方法把业务逻辑.数据与界面显示分离.用通俗的话来讲,MVC的理念就是把数据处理.数据展示和程序/用户的 ...

  5. maven的pom.xml配置json依赖

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  6. python的迭代器、生成器、三元运算、列表解析、生成器表达式

    一 迭代的概念 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前 ...

  7. 编写高性能的javascript代码(持续更新)

    参考资料: Vanilla JS——世界上最轻量的JavaScript框架(没有之一) http://segmentfault.com/a/1190000000355277 探索高效jQuery的奥秘 ...

  8. laravel contains 的用法

    最近在学laravel,做一下学习笔记. 1.contains()方法判断集合是否包含给定的项目: ]);var_dump($collection->contains('Desk'));// t ...

  9. 解决tpcc_load 报错 error while loading shared libraries: libmysqlclient.so.20

    在刚开始导入tpcc数据仓库时,可能会遇到 error while loading shared libraries: libmysqlclient.so.20这个错误,找不到库文件. 但是,通过fi ...

  10. XPATH怎么获取TITLE中有中文的标签

    定位 //*[@id="kkpager"]/div[1]/span[1]/a[@title="下一页"] 获取元素 txt4 = txt.xpath('//*[ ...