npm封装上传简述

作为前端开发工程师，npm包一定不陌生，现在大家用的大部分是第三方的包，那自己怎么封装一个包呢，下面让我们一起看下；

1、首先创建一个文件夹；

2、进入文件夹，初始化一个项目；

3、既然封装公共组建，就需要发布到npm包，供大家使用，做一些组件修改；

4、注册npm账号，发布npm包；

现在基本流程已经了解，具体做法我们讲一下；

第一步，我们需要进入本地npm包存放地址，cd Documents；

第二步，我们在当前文件夹初始化一个vue项目，简单版本，我们不需要很多的依赖，vue init webpack-simple npm_test；

第三步，使用npm install && npm run dev启动项目，在这个基础上做一些简单地开发，到现在大家是不是看着没什么问题，跟之前vue项目没什么区别，好，接下来我们看第四步；

第四步，我们修改src中index.js文件，目的是什么呢？当然是将该组件作为 Vue 插件可以被使用，具体做法如下：

import Adds from './add.vue'

const comment = {

  // 注册组件

  install: function(Vue) {

    Vue.component('Adds', Adds)

  }

}

// 这里的判断很重要

if (typeof window !== 'undefined' && window.Vue) {

    window.Vue.use(comment)

}

export default comment

第五步，执行npm run build，把index.html中src引用换成<script src="./dist/vue-adds.js"></script>，

第六步，修改package.json中的配置，因为要开源，需要 "private": false，并且把入口改为"main": "dist/vue-adds.js",将.gitignore 去掉忽略dist, 把打包的文件也提交上去；

第七步，npm login 登录， 然后npm pulish发布就可以了。

需要注意的是：每次更新时候，version不能一样（重要，重要，重要）。

现在自己封装的npm包就已经发布完成，其他人就可以通过npm下载自己的包了，是不是很简单，bingo~~

源码github：https://github.com/1196778674/npm_test