标签： nuclide

[react-native/react]如何安装及使用 nuclide

nuclide 是一款由 facebook 研发, 基于 atom 的, 针对 web/mobile 开发定制的 IDE, 目前(2015.10.06) 还处于初级阶段, 相应的支持很少. 但难得的是这是一款 IDE 而不是编辑器, 也是现阶段能对 react/react-native 提供主要支持的少有的几个工具之一.

本文主要针对 react-native 开发, 不涉及其他功能.

直接使用 atom 安装可能会发生 atom helper 长时间占用 100% cpu 进而导致 atom 无法使用的问题 github issue, 下面是解决方法.

正确的安装方法(之一):

环境: El Capitan 10.11.0, atom 1.0.19, Nuclide 截止至10月6日代码

安装方法:

  1. 清空 ~/.atom/packages 下面所有 nuclide 相关的包, 注意不仅仅是 nuclide 开头的, 还有个 hyperclick 也是 nuclide 的组件
  2. 删除 ~/.atom/config.cson 里面 disabledPackages 中禁用的 nuclide 相关 package
  3. 按照 nuclide readme 下面 Building from Source 的方法, 用 ./scripts/dev/setup 安装, 包实际上安装到了 nuclide 项目目录里, 以软连接的形式放到了 ~/.atom/packages 下面, 注意脚本运行过程中有没有错误信息, 如果有要解决.
  4. 安装后第一次启动 atom 会没响应, 问你要不要 wait 选 wait, 可以看到 atom helper 一直占用 100% cpu, 这是 because of the large number of Babel files that need to be transpiled, 等不到 10 分钟就正常了. 再次重开包括进 settings 也没有问题, 不需要禁用任何 package

PS1.可能要注意的:

  1. 在安装前保证 atom 没有任何打开的项目, 标签等, 包括 settings, timecop 这些东西

PS2. 安装后, 一定要注意的:

  1. 仔细阅读 nuclide-flow 的 readme, 会告诉你如何让这个插件正常运作:
    • 插件 settings 添加 flow 的路径,
    • 加 .flowconfig (react-native 默认就会自动生成),
    • 加 /* @flow */
  2. react-native 自动生成的 .flowconfig 可能会让 flow 无法运行, 原因是其中的 [version] 会限制 flow 的版本, 不匹配就不能运行, 删掉那部分即可
  3. flow 执行需要几秒钟, 过了这几秒就可以像 readme 展示的那样支持 cmd-click 等功能了
  4. 仔细观察 nuclide-flow 包的设置选项, 你会发现默认需要通过 save 来触发 flow 的错误检测, 并且提供了选项来让 flow 随时检测错误.

PS3.

  • 仔细读其他 nuclide 插件的 readme (如果有), 目前 nuclide 的相关东西特少, 有问题都搜不到, 所以仔细读说明才是正确的做法