摘要：將剪切板中的數(shù)據(jù)轉(zhuǎn)換為然后暫存到本地，通過本地文件的方式來進(jìn)行上傳七牛。以上，就是開發(fā)一個(gè)插件的完整流程咯。

最近用Atom寫博客比較多，然后發(fā)現(xiàn)一個(gè)很嚴(yán)重的問題。。
沒有一個(gè)我想要的上傳圖片的方式，比如某乎上邊就可以直接copy/paste文件，然后進(jìn)行上傳。
然而在Atom上沒有找到類似的插件，最接近的一個(gè)，也還是需要手動(dòng)選擇文件，然后進(jìn)行上傳。
這個(gè)操作流程太繁瑣，索性自己寫一個(gè)插件用好了。

成品插件下載地址：https://atom.io/packages/atom-image-uploader

首先，我們確定了需求，要通過可以直接copy文件，然后在Atom中paste即可完成上傳的操作。
確定了以后，我們就要開始搬磚了。

因?yàn)?b>Atom是一個(gè)Electron應(yīng)用：https://electronjs.org

是使用JavaScript來開發(fā)的桌面應(yīng)用，所以對(duì)于一個(gè)前端來說，簡(jiǎn)直是太美好了。
我們先去翻看Atom的官方文檔，查看關(guān)于創(chuàng)建插件相關(guān)的操作：
首先我們?cè)?b>Atom中打開命令面板，然后輸入Generate Package

按下回車后，將會(huì)彈出一個(gè)對(duì)話框，在框中輸入要建立的包名即可完成一個(gè)Package的創(chuàng)建。

Atom會(huì)生成一套默認(rèn)文件，并打開一個(gè)新的窗口。

生成的插件目錄如下：

.
├── keymaps
│?? └── first-package.json
├── lib
│?? ├── first-package-view.js
│?? └── first-package.js
├── menus
│?? └── first-package.json
├── package.json
├── spec
│?? ├── first-package-spec.js
│?? └── first-package-view-spec.js
└── styles
    └── first-package.less

這里可以配置要監(jiān)聽的快捷鍵，我們可以設(shè)置一些自定義快捷鍵來觸發(fā)一些我們插件的行為。

{
  "atom-workspace": {
    "ctrl-alt-o": "first-package:toggle"
  }
}

我們可以添加各種自定義的快捷鍵在這里。
Value的定義為：包名:觸發(fā)的事件名
需要注意的是：
這里配置的快捷鍵還有一個(gè)作用域的概念。也就是JSON外邊的那個(gè)key。
atom-workspace表示在Atom中生效
atom-text-editor表示只在文本編輯器范圍內(nèi)生效。

Atom官方文檔

這里就是存放插件主要代碼的地方了。
默認(rèn)會(huì)生成兩個(gè)文件：

package.js

package.view.js

默認(rèn)插件生成的主入口文件指向這里。

入口文件的表現(xiàn)方式為一個(gè)JSON對(duì)象，可以實(shí)現(xiàn)如下幾個(gè)函數(shù)：

activate: 當(dāng)Package被激活時(shí)會(huì)執(zhí)行該方法，函數(shù)的簽名表示會(huì)接受一個(gè)state參數(shù)，該參數(shù)是通過serialize方法傳遞過來的（如果有實(shí)現(xiàn)它的話）

deactivate: 當(dāng)Package失效時(shí)會(huì)出發(fā)的方法，這兩個(gè)方法可以理解為React中的componentWillMount和componentWillUnmount

serialize: 也就是上邊說到的那個(gè)方法，可以返回一個(gè)JSON對(duì)象供下次激活后使用

自定義快捷鍵對(duì)應(yīng)的事件名: 每次Package被觸發(fā)對(duì)應(yīng)快捷鍵時(shí)都會(huì)執(zhí)行的方法

這里存放的是在應(yīng)用菜單和編輯區(qū)域菜單欄的配置文件

{
  "context-menu": {
    "atom-text-editor": [
      {
        "label": "Toggle first-package",
        "command": "first-package:toggle"
      }
    ]
  },
  "menu": [
    {
      "label": "Packages",
      "submenu": [
        {
          "label": "first-package",
          "submenu": [
            {
              "label": "Toggle",
              "command": "first-package:toggle"
            }
          ]
        }
      ]
    }
  ]
}

context-menu對(duì)應(yīng)的元素會(huì)在對(duì)應(yīng)的區(qū)域內(nèi)右鍵觸發(fā)時(shí)顯示。
menu則是出現(xiàn)在Atom主菜單欄上：

同樣的，context-menu會(huì)區(qū)分兩個(gè)環(huán)境，text-editor和workspace。

這里存放的是一些測(cè)試用例，創(chuàng)建Package會(huì)生成一些默認(rèn)的斷言。
寫測(cè)試確實(shí)是一個(gè)好習(xí)慣。

如果Package有很多View要展示的話，可以在這里編寫，默認(rèn)使用的是Less語法。
由于我們只做一個(gè)C/V的操作，不會(huì)涉及到界面，所以styles直接就刪掉了。

大致結(jié)構(gòu)已經(jīng)了解了，我們就可以開始搬磚了。
因?yàn)槭且粋€(gè)Electron應(yīng)用，所以我們直接在Atom中按下alt + command + i，呼出我們熟悉的控制臺(tái)界面。

Atom是不會(huì)把Electron的各種文檔重新寫一遍的，所以我們現(xiàn)在控制臺(tái)里邊試一下我們的猜測(cè)是否正確。
一些想要的東西是否存在。

經(jīng)過驗(yàn)證確定了，Electron的clipboard對(duì)象可以直接在Atom中使用，這就很開心了。

require("electron").clipboard.readImage().toPng()

這樣我們就拿到剪切板中的圖片數(shù)據(jù)了，一個(gè)二進(jìn)制的數(shù)組對(duì)象。
我們?cè)谟|發(fā)Paste操作時(shí)，從clipboard中獲取，如果剪切板中是圖片的話，我們就將它上傳并顯示到編輯器中。
所以，接下來我們要做的就是：

進(jìn)行上傳圖片的操作

將上傳后的圖片顯示到編輯器中

上傳圖片我們選擇的是七牛，我們選擇七牛來作為圖床使用，因?yàn)樗姨峁┝?0GB的免費(fèi)存儲(chǔ)，灰常適合自己這樣的筆記型博客。
但是用他家SDK時(shí)發(fā)現(xiàn)一個(gè)問題。。我將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為ReadStream后上傳的資源損壞了-.-目前還沒有找到原因。
所以我們做了曲線救國(guó)的方式。
將剪切板中的數(shù)據(jù)轉(zhuǎn)換為Buffer然后暫存到本地，通過本地文件的方式來進(jìn)行上傳七牛。
在操作完成后我們?cè)賹⑴R時(shí)文件移除。

try {
  let buffer = clipboard.readImage().toPng()
  let tempFilePath = "XXX"
  fs.writeFileSync(tempFilePath, Buffer.from(buffer))
} catch (e) {
  // catch error
} finally {
  fs.unlink(tempFilePath) // 因?yàn)槲覀儾⒉灰蕾囉趧h除成功的回調(diào)，所以直接空調(diào)用異步方法即可
}

因?yàn)榭紤]到上傳可能會(huì)受到網(wǎng)絡(luò)影響，從而上傳時(shí)間不可預(yù)估。
所以我們會(huì)先在文件中顯示一部分占位文字。
通過全局的atom對(duì)象可以拿到當(dāng)前活躍的窗口：

let editor = atom.workspace.getActiveTextEditor()

為了避免同時(shí)上傳多張圖片時(shí)出現(xiàn)問題，我們將臨時(shí)文件名作為填充的一部分。

editor.insertText(`![](${placeHolderText})`, editor)

然后在上傳成功后，我們將對(duì)應(yīng)的填充字符替換為上傳后的URL就可以了。

editor.scan(new RegExp(placeHolderText), tools => tools.replace(url))

scan方法接收一個(gè)正則對(duì)象和回調(diào)函數(shù)。
我們將前邊用到的占位文本作為正則對(duì)象，然后在回調(diào)將其替換為上傳后的url。
至此，我們的代碼已經(jīng)編寫完了，剩下的就是一些交互上的優(yōu)化。

完成后的效果圖：

以及，最后：我們要進(jìn)行Package的上傳。

首先我們需要保證package.json中存在如下幾個(gè)參數(shù)：

name

description

repository

我們可以先使用如下命令來檢查包名是否沖突。

apm show 你的包名

如果沒有沖突，我們就可以直接執(zhí)行以下命令進(jìn)行上傳了。

apm publish 你的包名

后續(xù)的代碼修改，只需在該包的目錄下執(zhí)行：

apm publish

一些可選的參數(shù)：

major，增加版本號(hào)的第一位1.0.0 -> 2.0.0

minor，增加版本號(hào)的第二位0.1.0 -> 0.2.0

patch，增加版本號(hào)的第三位0.0.1 -> 0.0.2

通過apm help可以獲取到更多的幫助信息。

以上，就是開發(fā)一個(gè)Atom插件的完整流程咯。

hacking-atom
electron-doc