背景
imove简介
imove 是一个逻辑可复用的，面向函数的，流程可视化的 JavaScript 工具库。只要你移动鼠标拖拽，生成流程图之后配置节点 imove 会帮你生成对应代码。特性
- 流程可视化：上手简单，绘图方便，逻辑表达更直观，易于理解
Done - 逻辑复用：iMove 节点支持复用，单节点支持参数配置
Done - 灵活可扩展：仅需写一个函数，节点可扩展，支持插件集成
Done - 适用于 JavaScript 所有场景：比如前端点击事件，Ajax 请求和 Node.js 后端 API 等
Done - 多语言编译：无语言编译出码限制（例：支持 JavaScript、Java 编译出码）
GitHub 地址→github.com/imgcook/imo…
iMove 优势
1）逻辑可复用 面对频繁迭代的日常业务需求，我们一定会遇到许多相似、重复的开发工作。体现在代码中它可以是一段通用的 utils 工具方法，也可以是一段通用的业务逻辑代码（比如分享），但究其本质它们就是一个 代码片段。为了提高代码的复用，我们往往会将其封装成一些通用的类或函数，然后在各个项目中拷贝粘贴（做得好一点可以将其封装成 npm 包，但修改发布的流程又会稍显繁琐）。
而在 iMove 中，每个可复用的代码片段都可以被封装成流程图中的节点。当想在不同项目中复用逻辑的时候，直接引入对应的节点/子流程即可，每个节点还支持参数配置，进一步提升了节点的复用性，使用体验可以说是非常简单了。
再往后设想一步，假如 iMove 已经在某个业务场景中沉淀了一定量的业务节点，当下次再遇到相似的业务需求时，逻辑部分是否可以直接复用现成的节点拼装而成。这可是大大提升了研发效率，缩短了项目的研发周期。
2）面向函数 在节点的设计方面，iMove 做得比较克制，每个节点其实就是导出一个函数，因此编码体验上几乎没有什么上手成本，只要你有JavaScript基础就能使用。你可以照常 import 其他 npm 包，也不用考虑节点之间的全局变量命名污染等问题，将它当做一个普通的 js 文件即可。
3）流程可视化 我们将流程可视化的这种开发方式称之为 "逻辑编排"，它的好处（逻辑表达更为直观，易于理解）前文已经介绍过，这里就不再重复赘述。
4）逻辑/UI 解耦 我们在日常业务开发中经常会遇到：UI 样式经常变化，而业务逻辑较为稳定，甚至还会有 ABTest 需求查看改版效果。
然而许多开发者在组件开发之初并不会设想到将来会有这一步，因此一个业务组件往往会将 "业务逻辑" 和 "UI样式" 耦合在一起。而到了改版的时候才会发现要想抽离和复用业务逻辑并不容易，维护成本也大大增加。 不过当你使用 iMove 开发之后就会发现：组件代码自然而然就拆成了 "业务逻辑" + "UI样式"。而且，不同版本的 UI 可以维护多套，但业务逻辑部分只要交给 iMove 维护一套即可。这样的开发方式不仅可以最大程度地复用业务逻辑代码，而且还提高了项目的可维护性。
5）更简单的代码测试 为了提升 iMove 的使用体验，我们实现了 "浏览器端在线运行节点代码" 的功能。这意味着当完成一个节点的函数功能时，你随时可以在浏览器端 mock 各种输入来测试该节点的运行结果是否符合你的预期。
也就是说，在无须引入测试框架、脱离上下文环境的前提下，你就可以单独对某一个节点的函数进行测试，这大大降低了代码测试的成本和门槛。与此同时，你还可以顺手将每次的测试输入/输出作为测试用例进行保存，渐而形成一份完备的测试用例，这不但可以保障该节点的代码质量，还可以更放心得被引用在其他项目当中。
6）无语言/场景限制 虽然 iMove 本身是一个 JavaScript 工具库，但在我们的设计中 iMove 并没有对使用语言和场景加以限制。也就是说，你不仅可以用 iMove 编排前端项目中的 js 代码，同样也可以用 iMove 编排后端项目中的 java 代码，甚至其他场景的其他语言。而这一切，其实最终只取决于 iMove 将流程图编译出码成什么语言而已。
imove体验
基于imove的种种优势，今天我们也来体验一下它的迷人之处，今天结合一个案例来一步一步同大家一起研究它的奥妙......
项目初始化
新建工程：这里使用 react-app 来创建我们的工程，当前使用的环境是yarn: 1.2.4, node： 14.15.0
// 初始化工程
npm init react-app my-app
// 进入项目
cd my-app
// 安装依赖
yarn
// 项目启动
yarn start
项目启动后的效果如图：
安装imove/cli
1、全局安装@imove/cli
yarn add -g @imove/cli
这里需要注意下，安装@imove/cli大概率会遇到失败的情况，看了下github中也有人反馈这个问题，但是目前还没有回复如何解决，当前最新的版本应该是0.0.5，如果遇到问题可以安装指定0.0.4版本，错误图下
2、项目中初始化imove
imove -i
3、启动 imove 本地构建器
imove -d
这一步有可能也会遇到问题，错误如下图，如果遇到这个错误，可以切换下node 版本，我本地node^12.14.0可以
4、成功启动后控制台可以看到如下详细
启动imove编辑器
本地启动，参考imove
$ git clone https://github.com/ykfe/imove.git
$ cd imove/example
$ npm install
$ npm start
启动后效果如下图，其中my-app本地连接成功就是关联的上面的项目，imove -d执行成功有这个地方就会关联上了。
这样点击编辑后点击保存，就会将编辑的代码保存在项目目录src/logic。 如下图：
完整流程小结
项目体验
imove上下文ctx
我们随便打开下imove中的任何一个节点，可以发现在节点中编辑的都是一个函数方法，并且函数方法都会有一个入参 ctx，如图：
接下来我们来本地执行下这个，并且把上下文ctx打印出来，看看它到底是个什么？
至此，imove体验项目已经搭建好了，后面可以基于文档进行不断地探索拉.......
