Chinaunix首页 | 论坛 | 博客
  • 博客访问: 7729
  • 博文数量: 2
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 31
  • 用 户 组: 普通用户
  • 注册时间: 2017-08-18 11:07
文章分类
文章存档

2017年(2)

我的朋友
最近访客

分类: HTML5

2017-08-18 11:21:05

使用 React 开发 Atom 插件
Atom 是目前非常流行的编辑器,除了好用小巧的特点,它丰富的插件也给开发者提供了很多的便利性。

Atom 是基于 Electron 开发的,也就是说我们可以通过写 HTML + CSS + JavaScript 的方式来构建我们的桌面应用。而一个典型的Electron App 的架构如图:

其实我们在完成实际的插件的部分,也就是工作的最上层,使用我们前端最基本的知识去实现基本的需求。当然这一层的实现,可以有很多方式,你可以使用简单的JS 去创建视图窗口,你也可以使用一些框架,比如 Vue.js 以及今天提及的 React。React 最核心的一个目标:

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

React 的发展很迅速,现在不仅可以完成普通网站的开发,也能能够开发原生的App(React-Native),也可以开发 VR 相关的内容 (React-VR), 当然桌面应用现在也是可以借助于 Electron 完成。
今天我们简单实现一个插件,通过菜单按钮,呼出对话框,然后完成输入字符串,并将字符串插入到我们的当前代码中。
我的博客:业余草www.xttblog.com

创建项目

首先我们创建一个基本的插件包,打开 Atom 然后通过 Package Generator 提供的命令来创建一个基本的文件结构。我们通过快捷键 Cmd+shift+P 或者 Ctrl+shift+P 输入 “Package Generator” ,输入你的项目名称(我的暂时叫atom-plugin-test),然后进入项目目录,可以看到一个基本的结构:

+ keymaps // 存放快捷键配置
+ lib   // 主要业务的实现
+ menus // 设置菜单的配置
+ spec  // 添加测试
+ styles // 存放样式的目录
  .gitignore
  package.json
  RADEME.md

我们可以按照自己的需求修改 pacakge.json 和 README.md。至于其他目录下面的内容,我们后面会提及到。

默认的插件包生成后,我们可以看到菜单栏的 Packages 里面的选项里有我们刚刚创建的插件包的选项。

安装依赖

首先我们先安装 我们插件环境所需要的一些依赖:

npm install --save react-dom react rxjs redux classnames 

其中有些类库 redux rxjs 等根据你个人的使用情况安装。 当然你也可以安装开始时候需要的一些诸如打包,语法检查和测试的一些依赖诸如 eslint flow-bin webpack等,这也完全取决于你个人的需求。

熟悉基本的Atom 插件开发

如果你之前没有开发过 Atom 插件,你可以阅读官方的 Building your first Atom plugin , 官方会比较详细的介绍开发插件的一个基本流程。当然后文也会在开发的过程中强调这些基本的概念。

首先我们进入 lib/atom-plugin-test.js 里面(不同的项目名称,自然lib下的文件名称也不一样),它就是每个插件包的入口文件,每个插件包都需要指定这样的入口文件。我们先试着在 toggle 里面简单修改一行代码,来体验下修改的效果。 我们选择 View -> Developer -> Toggle Developers Tool 打开调试器,查看插件的输出。 每次修改完后代码,我们都需要重启编辑器,你可以 选择菜单栏 View -> Developers -> Reload Window 来实现,你也可以调用 Cmd+shift+P 或者 Ctrl+shift+P 输入 Window 然后选中 reload 命令来执行。

// ...
toggle() { 
    console.log('This is a new plugin');
    return (
      this.modalPanel.isVisible() ?
      this.modalPanel.hide() :
      this.modalPanel.show()
    );
  }

这个时候我们可以选择 Packages -> atom-plugin-test -> toggle 查看输出。

如果你想修改按钮的名称,这个时候你可以去 menus目录下的 atom-plugin-test.json进行修改,其中 context-menu 表示鼠标右键的菜单选项,而 menu 则是菜单栏的按钮选项。如果我们留心 我们的入口文件的话,我们可以看到这段代码:

// Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
    this.subscriptions =
阅读(1245) | 评论(0) | 转发(0) |
1

上一篇:没有了

下一篇:查看Android应用签名信息

给主人留下些什么吧!~~