小編給大家分享一下如何開(kāi)發(fā)一個(gè)Atom插件，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比饒平網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式饒平網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋饒平地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

最近用Atom寫(xiě)博客比較多，然后發(fā)現(xiàn)一個(gè)很?chē)?yán)重的問(wèn)題。。

沒(méi)有一個(gè)我想要的上傳圖片的方式，比如某乎上邊就可以直接copy/paste文件，然后進(jìn)行上傳。

然而在Atom上沒(méi)有找到類(lèi)似的插件，最接近的一個(gè)，也還是需要手動(dòng)選擇文件，然后進(jìn)行上傳。

這個(gè)操作流程太繁瑣，索性自己寫(xiě)一個(gè)插件用好了。

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

規(guī)劃

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

插件開(kāi)發(fā)

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

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

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

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

項(xiàng)目結(jié)構(gòu)

生成的插件目錄如下：

.
├── 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

keymaps

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

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

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

Atom官方文檔

lib

這里就是存放插件主要代碼的地方了。
默認(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ù)是通過(guò)serialize方法傳遞過(guò)來(lái)的（如果有實(shí)現(xiàn)它的話）

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

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

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

menus

這里存放的是在應(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。

spec

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

styles

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

開(kāi)始搬磚

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

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

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

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

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

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

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

上傳圖片

上傳圖片我們選擇的是七牛，我們選擇七牛來(lái)作為圖床使用，因?yàn)樗姨峁┝?0GB的免費(fèi)存儲(chǔ)，灰常適合自己這樣的筆記型博客。
但是用他家SDK時(shí)發(fā)現(xiàn)一個(gè)問(wèn)題。。我將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為ReadStream后上傳的資源損壞了-.-目前還沒(méi)有找到原因。
所以我們做了曲線救國(guó)的方式。
將剪切板中的數(shù)據(jù)轉(zhuǎn)換為Buffer然后暫存到本地，通過(guò)本地文件的方式來(lái)進(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ì)先在文件中顯示一部分占位文字。
通過(guò)全局的atom對(duì)象可以拿到當(dāng)前活躍的窗口：

let editor = atom.workspace.getActiveTextEditor()

為了避免同時(shí)上傳多張圖片時(shí)出現(xiàn)問(wè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)編寫(xiě)完了，剩下的就是一些交互上的優(yōu)化。

完成后的效果圖：

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

上傳開(kāi)發(fā)完的Package

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

1. name
2. description
3. repository

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

apm show 你的包名

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

apm publish 你的包名

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

apm publish

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

1. major，增加版本號(hào)的第一位1.0.0 -> 2.0.0
2. minor，增加版本號(hào)的第二位0.1.0 -> 0.2.0
3. patch，增加版本號(hào)的第三位0.0.1 -> 0.0.2

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

看完了這篇文章，相信你對(duì)如何開(kāi)發(fā)一個(gè)Atom插件有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！