剛做完一個atom插件項目渗鬼，通過這個插件下載一些上傳在服務(wù)器上的react代碼應(yīng)用刹衫，以幫助react的初學(xué)者快速上手。趁現(xiàn)在都記得口糕，把遇到的問題及解決問題的方法都總結(jié)下缅阳，希望對后面開發(fā)atom插件的童靴給個參考。
一. 新建一個插件
啟動atom編輯器走净，按下 cmd+shift+p(mac)或者 ctrl+shift+p（Windows/Linux）來打開命令面板
搜索“Package Generator: Generate Package”并點擊列表中正確的條目券时，你會看到一個輸入提示，將 “my-package" 改成你自己插件的名稱：“react-template”伏伯。
按下回車鍵來生成這個插件的骨架代碼，它會自動在 Atom 中打開捌袜。
基本的文檔結(jié)構(gòu)如圖所示：
二.運行插件
第一種方式：快捷鍵啟動
打開keymaps中的react-template.json文件说搅，里面標識了啟動這個插件的默認快捷鍵：“ctrl-alt-o",這可以更改，不與你系統(tǒng)中存在的快捷鍵沖突即可虏等。
啟動插件弄唧，按“ctrl-alt-o"适肠，出現(xiàn)這樣一個彈窗，證明你新建的插件是好用的.要是沒有效果候引，就先刷新下侯养，執(zhí)行Window: Reload，或者使用快捷鍵ctrl-shift-F5(win),ctrl-alt-cmd-l(mac)
出現(xiàn)這個彈窗后點擊彈窗是沒法關(guān)閉它的澄干，必須使用ctrl-alt-o,或者刷新才可以逛揩。
第二種方式：在菜單里啟動
找到packages里你的插件名稱react-template,點擊Toggle即可啟動，關(guān)閉也是同樣操作麸俘。
.
三.插件里文件的基本介紹
1.keymaps
定義了插件的快捷鍵辩稽，可以自己設(shè)置。atom-workspace 是設(shè)置快捷鍵起作用范圍从媚，只要在工作區(qū)域按快捷鍵就可以觸發(fā)彈窗命令逞泄。如果定義 atom-text-editor，那么就只能在編輯區(qū)域觸發(fā)命令
2.lib
react-template-view.js
react-template.js
lib里面有兩個文件拜效，是實現(xiàn)插件功能的代碼喷众。主入口文件為react-template.js,這個會在package.json的main中指定。react-template-view.js這個文件是視圖模板紧憾，我們的插件的外觀需要在這里設(shè)置到千。
activate(state)：在插件激活的時候觸發(fā)，這時候工作區(qū)已經(jīng)準備就緒了稻励。如果你的包實現(xiàn)了 serialize() 方法父阻，那么將會傳遞上次窗口序列化的 state 數(shù)據(jù)給該方法，常用于執(zhí)行初始化望抽，例如綁定事件等等加矛。
initialize(state)：與上個方法類似, 但在它之前調(diào)用。initialize（）在你的發(fā)序列化器或視圖構(gòu)建之前調(diào)用煤篙，activate() 是在工作區(qū)環(huán)境都已經(jīng)準備后調(diào)用斟览。如果你想執(zhí)行更多初始化控制，可以使用該方法辑奈。
serialize()：在窗口關(guān)閉的時候苛茂，如果你的插件需要保存某些狀態(tài)信息，可以使用該函數(shù)鸠窗。當窗口再次打開的時候妓羊，狀態(tài)信息會傳遞給activate(state)。
deactivate()：該方法在窗口關(guān)閉的時候執(zhí)行稍计，在這里需要解綁事件綁定躁绸、清理插件需要的資源。
3.menus
目錄包括一個cson文件，用于設(shè)置插件的菜單項净刮。默認的文件如下剥哑，其中context-menu設(shè)置上下文菜單，也就是右鍵打開的菜單淹父；menu設(shè)置菜單項中打開的菜單株婴。
{
"context-menu": {
"atom-text-editor": [
{
"label": "Toggle react-template",
"command": "react-template:toggle"
}
]
},
"menu": [
{
"label": "Packages",
"submenu": [
{
"label": "react-template",
"submenu": [ {"label": "Toggle",
"command": "react-template:toggle" }]}]
}
]
}
4.spec
測試代碼
5.styles
styles 目錄下存放的是插件的樣式文件∈钊希可以使用 CSS 或 LESS 編寫
6.package.json
{
"name": "react-template",
"main": "./lib/react-template",
"version": "0.0.0",
"description": "A short description of your package",
"keywords": [
],
"activationCommands": {
"atom-workspace": "react-template:toggle"
},
"repository": "https://github.com/atom/react-template",
"license": "MIT",
"engines": {
"atom": ">=1.0.0 <2.0.0"
},
"dependencies": {
}
}
package.json跟npm類似困介， 涉及一些發(fā)布和各種配置，他自己的獨特之處如下：
- main ： 這個是你執(zhí)行命令后進入的主文件穷吮，也就是入口文件逻翁，默認是尋找index的，同時atom支持 coffee 和 js
- styles ：一個字符串數(shù)組聲明來讓atom加載樣式文件順序捡鱼，如果沒有八回，就順序的讀取styles文件夾里面的文件
- keymaps ： 一個字符串數(shù)組聲明package需要加載的key map文件順序，如果沒有驾诈，按順序讀取keymaps文件夾的文件
- activationCommands ：一個對象來聲明觸發(fā)你的package的行為缠诅，key是css選擇器形式，value是一個字符串數(shù)組聲明命令乍迄。知道規(guī)定的css 選擇器中一個觸發(fā)了管引，才會載入你的package
