Vue封装JS模块并发布npm

1、注册账号

首先需要去官网注册一个npm账号

注册地址：https://www.npmjs.com/

 2、初始化要封装的包

在文件夹中使用cmd打开终端，使用命令初始化

npm init

使用npm init初始化之后呐，需要配置一些文件信息

name：填写需要发布的包的名字，这个名字就是后期npm install xxx的插件名。这里需要重点说一下，为了防止有重复的包名，建议先去npm上面查找一下；如果不知道在npm上面怎么查找，我在这里介绍一个简单的方法，就是去项目中下载，如果能正常下载说明你的包名已经有了就需要跟换，如果下载报错，那么恭喜可以正常使用。

version：这个是版本号，默认版本是1.0.0。这里也需要注意的是，每次修改代码之后都需要更换版本号，不然发布就会报错。版本号是以x.y.z的格式，修复bug变更z，新增功能的话变更y，如果不再向下兼容则需要变更x。

description：这个是用来描述你这个包的作用的。

entry point：入口文件，默认是index.js，也可以修改为自己创建的js文件名。

test command：测试命令，这个可以不用管暂时也不需要，直接键盘回车。

git repository：这个是远程仓库地址，如果你的包放在github上或者git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话直接回车继续。

keyword：这个就比较重要了，这个就关系到有多少人能搜索到你的这个npm包，所有尽可能的使用一些贴切的关键字作为这个包的索引。

author：填写github或者git账号。

license：开源文件，直接键盘回车即可。

1)、以上信息如果不知道怎么填写的话可以直接回车，之后会生成一个package.json文件，可以直接在package.json中进行配置。

2)、在文件夹中新建一个js文件，这个文件名要个entry point配置的入口文件名保持一致。

3)、写好README.md文件，这个是给大家描述你的包的markdown文件，就是告诉大家一些基本的操作。

3、登录npm

npm login

 使用这条命令之后会让你输入刚才注册的用户名、密码和邮箱，之后会向给你发送一条邮件，再次填写邮件中的验证码即可。

4、发布到npm官网

npm publish

刚才也有提到，每次修改代码发布之前，都需要更改package.json文件中的version版本号。最后如果没有报错那就说明发布成功了。

5、常见的报错问题

code 404：没有登录账号

code 403：报403的原因比较多，可能是你的包名重复了，可能是没有更换npm镜像（我们平时用的都是淘宝镜像，这里则需要更换成原始镜像）。我发布的时候报403提示我的包名在npm上面有相似的，为了避免搜索建议我更换，所以这个包名不仅不能重复，连相似都不可以。

 6、切换npm镜像

既然刚才提到了需要更换到原始镜像，那我再这样就说下怎么更换吧，也避免大家再去百度浪费时间。

查看当前npm镜像

npm config get registry

更换npm镜像（二选一即可）

npm config set registry https://registry.npm.taobao.org // 淘宝镜像

npm config set registry https://registry.npmmirror.com/ // 阿里云镜像

 更换原始镜像

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

最后我们可以再次使用npm config get registry来查看npm镜像是否更换成功。

7、测试发布前的npm包

1)、在本地测试包使用命令关联依赖包注册到全局使用

npm link

 2)、在需要到项目中引入本地测试包进行关联使用

npm link xxx

这个xxx就是测试包package.json文件中name属性配置的包名；

另外还需要在项目的package.json文件中加入依赖包，例如在dependencies项中加入以下依赖（需要注意的是，这里的版本号同样需要对应一致）：

"fengjunbo_utils": "1.0.1"

3)、测试没问题后，在项目中使用npm unlink xxx命令解除依赖包关联，在本地测试包中使用npm unlink依赖关联

8、测试发布后的npm包

我修改过代码，所以这里的版本号就是1.0.1。

根据name属性下载插件，我这里就是使用npm install fengjunbo_utils命令。

去项目中的package.json文件中查看使用下载成功。

在页面中引入此方法，查看代码是否报错。

引入方法后在<script>标签中使用即可。我这里做测试就直接在<template>模板中使用。

最后看下效果：

ok能正常显示，控制台也没有报错，至此就算完成了。想了解我封装的代码可以参考：

JS将时间戳转换成日期时间格式（封装友好日期）_js时间戳转换成日期格式_--angel的博客-CSDN博客