作为前端开发工程师，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~~
网友评论