atom插件开发-react应用模块下载插件

刚做完一个atom插件项目，通过这个插件下载一些上传在服务器上的react代码应用，以帮助react的初学者快速上手。趁现在都记得，把遇到的问题及解决问题的方法都总结下，希望对后面开发atom插件的童靴给个参考。

一. 新建一个插件

启动atom编辑器，按下 cmd+shift+p(mac)或者 ctrl+shift+p（Windows/Linux）来打开命令面板

搜索“Package Generator: Generate Package”并点击列表中正确的条目，你会看到一个输入提示，将 “my-package" 改成你自己插件的名称：“react-template”。

image.png

按下回车键来生成这个插件的骨架代码，它会自动在 Atom 中打开。
基本的文档结构如图所示：

image.png

二.运行插件

第一种方式：快捷键启动
打开keymaps中的react-template.json文件，里面标识了启动这个插件的默认快捷键：“ctrl-alt-o",这可以更改，不与你系统中存在的快捷键冲突即可。

image.png

启动插件，按“ctrl-alt-o"，出现这样一个弹窗，证明你新建的插件是好用的.要是没有效果，就先刷新下，执行Window: Reload，或者使用快捷键ctrl-shift-F5(win),ctrl-alt-cmd-l(mac)

image.png

出现这个弹窗后点击弹窗是没法关闭它的，必须使用ctrl-alt-o,或者刷新才可以。
第二种方式：在菜单里启动
找到packages里你的插件名称react-template,点击Toggle即可启动，关闭也是同样操作。

.

三.插件里文件的基本介绍

1.keymaps

定义了插件的快捷键，可以自己设置。atom-workspace 是设置快捷键起作用范围，只要在工作区域按快捷键就可以触发弹窗命令。如果定义 atom-text-editor，那么就只能在编辑区域触发命令

2.lib

react-template-view.js
react-template.js

lib里面有两个文件，是实现插件功能的代码。主入口文件为react-template.js,这个会在package.json的main中指定。react-template-view.js这个文件是视图模板，我们的插件的外观需要在这里设置。

• activate(state)：在插件激活的时候触发，这时候工作区已经准备就绪了。如果你的包实现了 serialize() 方法，那么将会传递上次窗口序列化的 state 数据给该方法，常用于执行初始化，例如绑定事件等等。

• initialize(state)：与上个方法类似, 但在它之前调用。initialize（）在你的发序列化器或视图构建之前调用，activate() 是在工作区环境都已经准备后调用。如果你想执行更多初始化控制，可以使用该方法。

• serialize()：在窗口关闭的时候，如果你的插件需要保存某些状态信息，可以使用该函数。当窗口再次打开的时候，状态信息会传递给activate(state)。

• deactivate()：该方法在窗口关闭的时候执行，在这里需要解绑事件绑定、清理插件需要的资源。

3.menus

目录包括一个cson文件，用于设置插件的菜单项。默认的文件如下，其中context-menu设置上下文菜单，也就是右键打开的菜单；menu设置菜单项中打开的菜单。

{
  "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类似， 涉及一些发布和各种配置，他自己的独特之处如下：

• main ： 这个是你执行命令后进入的主文件，也就是入口文件，默认是寻找index的，同时atom支持 coffee 和 js
• styles ：一个字符串数组声明来让atom加载样式文件顺序，如果没有，就顺序的读取styles文件夹里面的文件
• keymaps ： 一个字符串数组声明package需要加载的key map文件顺序，如果没有，按顺序读取keymaps文件夹的文件
• activationCommands ：一个对象来声明触发你的package的行为，key是css选择器形式，value是一个字符串数组声明命令。知道规定的css 选择器中一个触发了，才会载入你的package