上次為大家介紹了package.json的內(nèi)容巡蘸,文件在nodejs是非常有用的,發(fā)布npm是必須使用的俭驮,那么這次給大家說說如何給github的親兒子編輯器Atom發(fā)布一個package回溺,以便于共享你的好工具,造福大家混萝。
簡單介紹下Atom遗遵,是github用nodejs編寫的一個編輯器,其實應(yīng)該主要使用了node-webkit的技術(shù)譬圣,如果感興趣瓮恭,可以下次給大家詳細(xì)分析。
此文章來源于官方文檔的翻譯和自己開發(fā)插件的一些心得 ---- https://atom.io/docs/v1.2.4/hacking-atom-package-word-count
Package Generator
創(chuàng)建一個package最簡單的方式就是使用atom里面的生成器厘熟,使用命令面板--command(window)+shift+P,輸入generator屯蹦,找到Package Generator:Generate Atom Package 這行命令,選擇即可绳姨,這個時候輸入你的package名字登澜,可以起一個高大上有逼格的名字。
看見atom幫你創(chuàng)建了一大堆的文件夾和文件飘庄,一般來說脑蠕,基礎(chǔ)包如下
my-package/
keymaps/
lib/
menus/
spec/
styles/
package.json
README.md
CHANGELOG.md
LICENSE.md
.gitignore
package.json
同樣,首先看 package.json 因為他涉及到你的發(fā)布和各種配置。跟npm的很像谴仙,但是有自己的東東
main : 這個是你執(zhí)行命令后進(jìn)入的主文件迂求,也就是入口文件,默認(rèn)是尋找index的晃跺,同時atom支持 coffee 和 js
styles :一個字符串?dāng)?shù)組聲明來讓atom加載樣式文件順序揩局,如果沒有,就順序的讀取styles文件夾里面的文件掀虎。
keymaps : 一個字符串?dāng)?shù)組聲明package需要加載的key map文件順序凌盯,如果沒有,按順序讀取keymaps文件夾的文件烹玉。
activationCommands :一個對象來聲明觸發(fā)你的package的行為驰怎,key是css選擇器形式,value是一個字符串?dāng)?shù)組聲明命令二打。知道規(guī)定的css 選擇器中一個觸發(fā)了县忌,才會載入你的package。
來看看下面的package.json長相:
{
"name": "my-package",
"main": "./lib/my-package",
"version": "0.0.0",
"description": "A short description of your package",
"keywords": [
],
"activationCommands": {
"atom-workspace": "my-package:toggle"
},
"repository": "https://github.com/atom/my-package",
"license": "MIT",
"engines": {
"atom": ">=1.0.0 <2.0.0"
},
"dependencies": {
}
}
你最先要確認(rèn)的事情是就填寫這些信息址儒,包括:name芹枷,description, repository, license莲趣。 剩下的可以邊做邊寫鸳慈。
Source Code
我們來看看我們主文件,也就是剛剛創(chuàng)建的my-package.coffee,如果你在package.json中main的屬性沒有填寫喧伞,就是用index文件了走芋,這跟瀏覽器解析url很相似。
這跟最高級別的模塊是一個單獨對象潘鲫,管理著你的package在atom的生命周期翁逞,無論你有其他多少的視圖和模塊,都被它管理溉仑。
看看這個模塊有哪些重要的方法:
activate(state): 這個必需的方法在你的package執(zhí)行的時候被調(diào)用挖函,如果你的模塊使用了serialize()方法,那么這個方法會傳遞狀態(tài)數(shù)據(jù)浊竟,在你最后一次窗口被序列化的時候怨喘。使用這個初始化工作流程在package開始時
serialize() :這個可選的方法在窗口被掛起的時候調(diào)用,允許你返回一個json表示你的組件狀態(tài)振定。當(dāng)窗口再次喚起的時候必怜,這個數(shù)據(jù)會傳遞給activate方法,這樣你就可以恢復(fù)你的視圖后频。
deactivate() :這個可選的方法也是被掛起的時候調(diào)用梳庆,如果你的package有監(jiān)聽任何文件或者保持外部的資源暖途,釋放他們在這個時候。如果你只是訂閱窗口內(nèi)的膏执,就不必關(guān)心了驻售。
Style Sheets
這個很簡單,就是你的package執(zhí)行的時候胧后,用到的樣式表而已芋浮,可以是css或者less。less更好壳快,比較推薦。
其實你不需要太多的css镇草,因為atom本身就提供了一個標(biāo)準(zhǔn)包給使用眶痰,你可以使用CMD+shift+P 然后 搜索 styleguide 或者 cmd+crtl+shift+G。
如果你有什么特別要求梯啤,可以使用這個style文件夾竖伯,記得添加package.json的路徑。
Keymaps
推薦使用常用的操作鍵來綁定擴展因宇,特別是你也新加了一個命令的時候七婴,在我們package里面,我們的keymaps/my-package.cson文件:
'atom-workspace':
'ctrl-alt-o': 'my-package:toggle'
這個意思就是你同時按下 crtl-alt-o的時候察滑,我們的package就會執(zhí)行toggle命令打厘,你可以更改這些綁定在這個文件。
所有的快捷鍵都在keymaps的文件目錄中贺辰,默認(rèn)是所有的文件都被載入的户盯,package.json文件中有個可選的keymaps選項可以指定哪些文件被載入
Menus
這個文件主要是定義菜單欄的,包括頂部的package菜單里面的選項饲化,和右鍵菜單選項莽鸭。和keymaps一樣可以在package.json里面配置指定文件。
然后就是開發(fā)我們的插件吃靠,這個比較復(fù)雜硫眨,主要是涉及到Atom內(nèi)部的各種API和機制,這次先不講巢块,先說其他的礁阁。
Basic Debugging
最簡單的就是使用 console.log 來調(diào)試,跟我們在瀏覽器一樣夕冲,因為node-webkit其實就一個瀏覽器氮兵。
使用alt-cmd-I 或者選擇菜單 View>Developer> Toggle Developer Tools
Testing
當(dāng)然我們還需要寫測試功能,所有的測試代碼在 spec目錄下面歹鱼,使用jasmine來測試泣栈,所以大家要熟悉下jasmine的語法,其實各種測試都差不多。
使用cmd-alt-ctrl-p或者Developer>Run Package Spec菜單開始執(zhí)行測試南片。一般來說都會有錯誤掺涛,如下所示:
你可以自己慢慢的修改測試代碼,保證通過疼进,同時保證自己的package代碼不錯薪缆。
Publishing
現(xiàn)在我們的package沒問題了,也測試通過了伞广,剩下的就是發(fā)布了拣帽,要注意一些小的細(xì)節(jié),要不發(fā)布很可能失敗嚼锄。
Prepare Your Package
package.json 一定要有 name减拭, description 和 repository字段
package.json 要有 version字段來表示版本號" 0.0.0"
package.json 會有 engines 來表示工作環(huán)境,一般就是 {"Atom":">=1.0.0 <2.0.0"}
要有一個README.md文件在根目錄
整個文件要在github上有自己的地址区丑,并且已經(jīng)提交
Publish Your Package
在你發(fā)布之前拧粪,最好去atom官網(wǎng)上找找會不會有跟你同名的package,如果有沧侥,你就只能修改名字可霎,確保沒有之后, 你就可以在你的目錄下 使用
apm publish minor
來發(fā)布你的package了
這個命令會做以下事情:
注冊一個package的名字在atom.io上宴杀,如果是第一次發(fā)布
更新version從package.json文件中癣朗,然后提交
創(chuàng)建一個新的 git tag 給這次提交
推送這個tag和分支到 github上
用新發(fā)布的version更新到 atom.io 上
如果你是第一次提交,可能會需要填寫你github的用戶名和密碼婴氮,這個你跟著guide走就行了斯棒,注意別填錯了,主要是數(shù)字別用小鍵盤主经。
term中顯示成功之后荣暮,你就可以在
https://atom.io/packages/my-package
看到你的package的頁面了。記得編寫README.md的內(nèi)容給大家看罩驻。
說說 minor這個意思穗酥,其實publish后面跟的參數(shù)有三個選項的。
major: 表示給 apm 增加版本號的第一個數(shù)字惠遏,1.0.0 這樣子 git tag 也會是 v1.0.0
minor: 第二個數(shù)字砾跃, 0.1.0的含義
patch: 最后一個數(shù)字, 0.0.1的意思
這個是跟版本號管理對應(yīng)的节吮,一般數(shù)來 major對應(yīng)是往后兼容性的改變抽高,例如 修改默認(rèn)設(shè)置或者刪除功能, minor 一般就是添加一個小功能或者優(yōu)化透绩。 patch 就是修復(fù)小的bug翘骂。
以上就一個完整的atom package開發(fā)和發(fā)布的過程壁熄,主要參考官網(wǎng)的文檔,里面有我一定的心得碳竟。
同時 介紹我的新插件草丧,
https://atom.io/packages/vue-format
主要是最近開始寫 vue.js,然后webpack打包莹桅,使用.vue的文件方式昌执,結(jié)果沒有能格式化文件的插件,所以給atom寫了一個诈泼,這是 0.1.0的版本懂拾,有問題很正常,我后面還會慢慢優(yōu)化铐达,如果大家有興趣委粉,可以一起來優(yōu)化,或者給我提各種issue娶桦,歡迎交流