发布你的第一个npm包

在项目中我们会使用到很多npm包，工作时间一长，多多少少会有些技术积累，把一些实用性很高的插件单独作为一个项目开源分享出去，然后打包成npm方便大家使用以及方便自己的维护（项目级）。

直接放结果

vue-pdf-touchhttps://github.com/iMaldway/vue-pdf-touchvue-pdf-touch包https://www.npmjs.com/package/vue-pdf-touch

注册你的npm账号

这里推荐直接去npm官网注册

1.打开官网

2.点击Sign Up

3.进行人机校验

4.进行注册

按照表单要求填写相关资料就可以啦

登录你的npm账号

注意这里指的登录npm账号是指在你的电脑上登录，在你的项目目录打开控制台、命令行、终端其中之一输入以下命令：

npm login

 执行命令之后它会让你输入：

Username:
Password:
Email: (this IS public)

这里的信息都是你注册的信息，邮箱填写之后回车，会让你继续填写个邮箱验证码：

npm notice Please check your email for a one-time password (OTP)
Enter one-time password from your authenticator app: 

把收到的验证码填写就好啦，登录成功后控制台输出

Logged in as imaldway on https://registry.npmjs.org/.

注意如果你使用的是淘宝镜像源将在npm login阶段报错，请更换为官方源

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

构建一个专门的项目以供发布更新

1.使用手脚建或者vue ui构建一个空的项目

2.移除不需要的文件，如：components/HelloWorld.vue、assets/logo.png

3.将你的插件按照以往的方式放入src下的文件夹中，没有自己手动创建（src下想放哪就放哪），你的插件中name属性必须存在

4.同级目录新建index.js

components下的VuePdfTouch文件夹就是我的插件

5.在index.js文件中写入

// 注意这里的 VuePdfTouch 替换成你自己的插件，路径不能使用@
import VuePdfTouch from "./VuePdfTouch/index.vue";
// 如果你最终导出的插件还需要依赖其他插件初始化，那么在这个文件中一并导入。没有就删掉。
import VueTouch from 'vue-touch'

const components = [VuePdfTouch];

// Vue.use 注册为全局组件时必须提供一个install方法。
const install = function (Vue) {
  //  初始化依赖。没有就可以删掉
  Vue.use(VueTouch, {name: 'v-touch'});
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};

// 原生script tag引入方式
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  VuePdfTouch,
};

 请注意，不要使用@，因为你的主项目配置了@，则会按照主项目配置的路径查找，这里采用./表示当前文件夹。

在这个项目中测试

1.将App.vue直接修改为你的插件展示页面，以供自己测试吧

2.修改main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 将VuePdfTouch替换成你的插件名字，路径按照你的实际路径调整。
import VuePdfTouch from './components/index.js'
Vue.use(VuePdfTouch);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: ''
})

好啦，到此你可以跑起项目看看效果是否符合预期。

修改package.json

{
  "name": "你的包的名字", /** 你的包的名字 */
  "version": "1.0.4", /** 包的版本号，每次发布之前必须调整 */
  "description": "包简介",  /** 你的包的简介 */
  "author": "作者",  /** 你的包的作者 */
  "private": false,  /** 必须为false，发布为公共的别人才能用到 */
  "main": "src/components/index.js", /** 指向你的导出插件的index.js文件路径 */
  "files": [
    "src/components/" /** 需要被发布的内容，缩减体积，无关紧要的不需要发布出去 */
  ],
  "keywords": [  /** 你的包的关键字 */
    "vue",
    "pdf",
    "touch"
  ],
  "repository": {  /** 你的包的源码托管地址 */
    "type": "git",
    "url": "git+https://github.com/iMaldway/vue-pdf-touch.git"
  },
  "bugs": {
    "url": "https://github.com/iMaldway/vue-pdf-touch/issues" /** 你的包的bug地址 */
  },
  "homepage": "https://github.com/iMaldway/vue-pdf-touch#readme", /** 你的包的官网/说明 */
  "dependencies": { /** 你的包的依赖 */
    "vue": "^2.5.2",
    "vue-pdf": "^4.2.0",
    "vue-touch": "^2.0.0-beta.4",
    "node-sass": "4.14.1",
    "sass": "^1.27.0",
    "sass-loader": "^7.0.2"
  },
}

其中/**  */ 包裹的需要特别注意，请不要直接覆盖，而应该逐个属性替换

至此已经完成所有的准备工作了

上传包/撤销包/废弃包

1.上传包命令

npm publish

运行效果如下

 2.删除/取消包命令

npm unpublish [@]

3.废弃包命令

npm deprecate [@]