我已经在开头起笔停留了好几分钟，要是直接上干货可能已经写好一半了，但是这次我想认真思考和记录我此刻的成果和微小的成长
开发也可以用几个年头来形容了，一向有强迫症的我在有时间之余总喜欢把代码划分工整高效些，经常做一些模块化的组件
但是，每次换项目特别是多人合作的大项目，就发现我又得重新封装、重新开发，很难完美引入之前封装的组件，除非整个项目体系自己搭建，功能从一手抓起
尽管如此，我还是日夜不辞劳苦开发、封装、优化
一直到有一回
在一次职级晋升的答辩会上（第一次参加），我兴致勃勃展示自己的哪些优点，其中就提到自己封装的组件。
结果杨组长问了一句，你的组件在不同事业部能直接用吗？
？部门比较大，其他事业部的人都不认识，平时毫无交集，就连杨组长也不知道我是谁，其实本事业部的人都认识不超过一半，苦涩...
虽然我当时比较机智地解释了我的组件，自认为侥幸解释通过（可能组长悄咪咪、大写一个扣分）
但这件事一直惦记于心，我的劳动成果何时能像npm上面的资源包一样，别说其他事业部了，世界每个角落想用的都能用到 （努力中）
事情已过一段时日，近期忙着做一些小课题，也有些小成果
于是乎，开始了解npm上的资源是如何共享上去的
----------这个人怎么了，废话真多-------
---------------------------正经分割线----------------------
一、新建项目工程 （新建文件夹）
你可以选择创建简介版本的webapck配置模板
vue init webpack-simple my-project
最近刚好在学webpack，所以我选择另外方式
新建文件夹 antV-orgtree
1.1 进入后，首先
npm init
我就直接回车初始化，反正package.json内容是可以自己配置的
不需要安装webpack的直接跳过1.2
1.2 然后，自己配置packag.json，引入webpack， （webpack-dev-server可以不用）
再执行
npm i
另一种直接不配置package， 直接安装
npm install webpack webpack-cli --save-dev
1.3 封装的js文件放到src/index.js
我用es6 module 引入
index.js
import XX from '@XXX' // 引入依赖，当然你要安装依赖，如果是文件直接引入即可
export default class simpleTree { // 导出对象或者函数
此处编写对象的功能
}
如果你的封装的插件不是放到index.js里，请在配置package.json里保持一致配置
"main": "src/index.js",
以上就配置完成了
二、发布js库到npm
2.1 注册npm账号
有两种方式
|、 命令
npm adduser
然后根据提示填写好用户名、密码、邮箱
注意不要用cnpm
||、上官网注册
地址https://www.npmjs.com/
2.2 登录
进入项目内容 npm login 登录
2.3 先验证邮箱再发布
邮箱验证，可以参考我另一篇文章《npm打包发布js库包npm ERR! 403 Forbidden》
发布
npm publish
完成后可以上npm官网查看到自己发布了一个包
三、项目里引用依赖包
在一个新的项目里引入依赖（vue项目为例）
npm i antv-orgtree
然后打开测试app.vue
import orgTree from 'antv-orgtree'
项目初始化方式
let T = new orgTree({
id: 'tree',
data: this.treeData
})
T.initTree()
运行项目看到效果
以上完成了js库的发布以及项目简单引入使用的说明 ლ(′◉v◉｀ლ)
注意 以后发布每次都要改变版本号