我已經在開頭起筆停留了好幾分鍾，要是直接上干貨可能已經寫好一半了，但是這次我想認真思考和記錄我此刻的成果和微小的成長
開發也可以用幾個年頭來形容了，一向有強迫症的我在有時間之余總喜歡把代碼划分工整高效些，經常做一些模塊化的組件
但是，每次換項目特別是多人合作的大項目，就發現我又得重新封裝、重新開發，很難完美引入之前封裝的組件，除非整個項目體系自己搭建，功能從一手抓起
盡管如此，我還是日夜不辭勞苦開發、封裝、優化
一直到有一回
在一次職級晉升的答辯會上（第一次參加），我興致勃勃展示自己的哪些優點，其中就提到自己封裝的組件。
結果楊組長問了一句，你的組件在不同事業部能直接用嗎？
？部門比較大，其他事業部的人都不認識，平時毫無交集，就連楊組長也不知道我是誰，其實本事業部的人都認識不超過一半，苦澀...
雖然我當時比較機智地解釋了我的組件，自認為僥幸解釋通過（可能組長悄咪咪、大寫一個扣分）
但這件事一直惦記於心，我的勞動成果何時能像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◉｀ლ)
注意 以后發布每次都要改變版本號