如何發布一個Atom的package

上次為大家介紹了package.json的內容,文件在nodejs是非常有用的,發布npm是必須使用的,那么這次給大家說說如何給github的親兒子編輯器Atom發布一個package,以便于共享你的好工具,造福大家。

簡單介紹下Atom,是github用nodejs編寫的一個編輯器,其實應該主要使用了node-webkit的技術,如果感興趣,可以下次給大家詳細分析。

此文章來源于官方文檔的翻譯和自己開發插件的一些心得 ---- https://atom.io/docs/v1.2.4/hacking-atom-package-word-count

Package Generator

創建一個package最簡單的方式就是使用atom里面的生成器,使用命令面板--command(window)+shift+P,輸入generator,找到Package Generator:Generate Atom Package 這行命令,選擇即可,這個時候輸入你的package名字,可以起一個高大上有逼格的名字。

屏幕快照 2015-11-26 下午5.47.50.png

看見atom幫你創建了一大堆的文件夾和文件,一般來說,基礎包如下

my-package/
  keymaps/
  lib/
  menus/
  spec/
  styles/
  package.json
  README.md
  CHANGELOG.md
  LICENSE.md
  .gitignore

package.json

同樣,首先看 package.json 因為他涉及到你的發布和各種配置。跟npm的很像,但是有自己的東東

  • main : 這個是你執行命令后進入的主文件,也就是入口文件,默認是尋找index的,同時atom支持 coffee 和 js

  • styles :一個字符串數組聲明來讓atom加載樣式文件順序,如果沒有,就順序的讀取styles文件夾里面的文件。

  • keymaps : 一個字符串數組聲明package需要加載的key map文件順序,如果沒有,按順序讀取keymaps文件夾的文件。

  • activationCommands :一個對象來聲明觸發你的package的行為,key是css選擇器形式,value是一個字符串數組聲明命令。知道規定的css 選擇器中一個觸發了,才會載入你的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": {
    }
}  

你最先要確認的事情是就填寫這些信息,包括:name,description, repository, license。 剩下的可以邊做邊寫。

Source Code

我們來看看我們主文件,也就是剛剛創建的my-package.coffee,如果你在package.json中main的屬性沒有填寫,就是用index文件了,這跟瀏覽器解析url很相似。

這跟最高級別的模塊是一個單獨對象,管理著你的package在atom的生命周期,無論你有其他多少的視圖和模塊,都被它管理。

看看這個模塊有哪些重要的方法:

  • activate(state): 這個必需的方法在你的package執行的時候被調用,如果你的模塊使用了serialize()方法,那么這個方法會傳遞狀態數據,在你最后一次窗口被序列化的時候。使用這個初始化工作流程在package開始時

  • serialize() :這個可選的方法在窗口被掛起的時候調用,允許你返回一個json表示你的組件狀態。當窗口再次喚起的時候,這個數據會傳遞給activate方法,這樣你就可以恢復你的視圖。

  • deactivate() :這個可選的方法也是被掛起的時候調用,如果你的package有監聽任何文件或者保持外部的資源,釋放他們在這個時候。如果你只是訂閱窗口內的,就不必關心了。

Style Sheets

這個很簡單,就是你的package執行的時候,用到的樣式表而已,可以是css或者less。less更好,比較推薦。

其實你不需要太多的css,因為atom本身就提供了一個標準包給使用,你可以使用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就會執行toggle命令,你可以更改這些綁定在這個文件。

所有的快捷鍵都在keymaps的文件目錄中,默認是所有的文件都被載入的,package.json文件中有個可選的keymaps選項可以指定哪些文件被載入

Menus

這個文件主要是定義菜單欄的,包括頂部的package菜單里面的選項,和右鍵菜單選項。和keymaps一樣可以在package.json里面配置指定文件。

然后就是開發我們的插件,這個比較復雜,主要是涉及到Atom內部的各種API和機制,這次先不講,先說其他的。

Basic Debugging

最簡單的就是使用 console.log 來調試,跟我們在瀏覽器一樣,因為node-webkit其實就一個瀏覽器。

使用alt-cmd-I 或者選擇菜單 View>Developer> Toggle Developer Tools

屏幕快照 2015-11-26 下午6.42.18.png

Testing

當然我們還需要寫測試功能,所有的測試代碼在 spec目錄下面,使用jasmine來測試,所以大家要熟悉下jasmine的語法,其實各種測試都差不多。

使用cmd-alt-ctrl-p或者Developer>Run Package Spec菜單開始執行測試。一般來說都會有錯誤,如下所示:

屏幕快照 2015-11-26 下午6.48.23.png

你可以自己慢慢的修改測試代碼,保證通過,同時保證自己的package代碼不錯。

Publishing

現在我們的package沒問題了,也測試通過了,剩下的就是發布了,要注意一些小的細節,要不發布很可能失敗。

Prepare Your Package

  • package.json 一定要有 name, description 和 repository字段

  • package.json 要有 version字段來表示版本號" 0.0.0"

  • package.json 會有 engines 來表示工作環境,一般就是 {"Atom":">=1.0.0 <2.0.0"}

  • 要有一個README.md文件在根目錄

  • 整個文件要在github上有自己的地址,并且已經提交

Publish Your Package

在你發布之前,最好去atom官網上找找會不會有跟你同名的package,如果有,你就只能修改名字,確保沒有之后, 你就可以在你的目錄下 使用

    apm publish minor 

來發布你的package了

這個命令會做以下事情:

  1. 注冊一個package的名字在atom.io上,如果是第一次發布

  2. 更新version從package.json文件中,然后提交

  3. 創建一個新的 git tag 給這次提交

  4. 推送這個tag和分支到 github上

  5. 用新發布的version更新到 atom.io 上

如果你是第一次提交,可能會需要填寫你github的用戶名和密碼,這個你跟著guide走就行了,注意別填錯了,主要是數字別用小鍵盤。

term中顯示成功之后,你就可以在

      https://atom.io/packages/my-package

看到你的package的頁面了。記得編寫README.md的內容給大家看。

說說 minor這個意思,其實publish后面跟的參數有三個選項的。

major: 表示給 apm 增加版本號的第一個數字,1.0.0 這樣子 git tag 也會是 v1.0.0

minor: 第二個數字, 0.1.0的含義

patch: 最后一個數字, 0.0.1的意思

這個是跟版本號管理對應的,一般數來 major對應是往后兼容性的改變,例如 修改默認設置或者刪除功能, minor 一般就是添加一個小功能或者優化。 patch 就是修復小的bug。

以上就一個完整的atom package開發和發布的過程,主要參考官網的文檔,里面有我一定的心得。

同時 介紹我的新插件,

https://atom.io/packages/vue-format

主要是最近開始寫 vue.js,然后webpack打包,使用.vue的文件方式,結果沒有能格式化文件的插件,所以給atom寫了一個,這是 0.1.0的版本,有問題很正常,我后面還會慢慢優化,如果大家有興趣,可以一起來優化,或者給我提各種issue,歡迎交流

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,460評論 6 538
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,067評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,467評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,468評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,184評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,582評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,616評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,794評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,343評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,096評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,291評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,863評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,513評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,941評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,190評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,026評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,253評論 2 375

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,807評論 18 139
  • 作者:王子亭 Atom 是 GitHub 在 2014 年發布的一款基于 Web 技術構建的文本編輯器,我從 20...
    LeanCloud官方帳號閱讀 3,114評論 0 13
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,156評論 4 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,692評論 25 708
  • hbrczj閱讀 422評論 0 0