iOS混合开发库(GICXMLLayout)四、脚手架、IDE

在前一篇文章中介绍了如何一步一步创建GIC应用，并且给出了一个大概的工程结构的参考，而这一篇文章将会介绍如何使用脚手架直接创建GIC工程以及如何使用使用VSCode来开发项目。

GICXMLLayout现在已经有了配套的脚手架工具，以及IDE的支持。这将进一步的提升你的开发效率。

脚手架

脚手架是基于Node.js开发的，首先需要确保您的电脑上安装了node.js以及npm。

然后执行如下指令安装脚手架。

sudo npm install gicxmllayout-cli -g
复制代码

然后执行如下指令创建一个GIC工程。

gic init YourProject
复制代码

这时候脚手架会提供5种不同的工程模板供你选择。

1. 基础工程模板。

   这个模板是一个最基础的模板，仅仅提供了最基础的项目结构。没有hotreload、hotupdate等功能。不建议使用

2. HotReload。

   这个模板在基本的项目结构以外增加了HotReload功能，创建完项目后按照脚手架的提示就能使用。

3. HotReload & VSCode。

   这个模板在模板2的基础上，增加对VSCode的支持。这个模板需要你使用VSCode来开发，搭配gic提供的VSCode插件GICVSCodeExtension进行开发。

4. HotReload & VSCode & HotUpdate (推荐)

   这个模板在模板3的基础上进一步的增加了HotUpdate功能，这个模板也是GIC推荐的模板，根据脚手架的提示，你可以很容易的获得HotReload和HotUpdate功能。

5. Tabs

   这个模板在模板4的基础上提供了Tabs功能。可以直接使用XML来创建一个具备Tabs功能的应用。而且你也会发现，tabs功能是通过自定义元素的方式来实现的。

IDE支持

我个人推荐使用VSCode作为XML、JavaScript等文件的开发工具，并且针对VSCode已经配套开发了一个插件GICVSCodeExtension，利用这个插件你可以获得如下几个功能。

1. 针对XML文件，元素、属性的智能提示。
2. 针对JavaScript代码具备将ES6编译成ES5的功能，也就是意味着你可以直接写ES6规范的代码，而无需担心兼容性问题(事实上不同的iOS版本对于ES6的支持是不一样的)。最新版本已经加入了对ES8中的async、await的编译支持。
3. 提供了HotReload功能所需的http服务器。你也可以通过配置文件来修改http端口。
4. 提供了HotUpdate测试功能。

安装插件。

首先使用VSCode打开GIC工程的目录。

然后在VSCode的插件市场中搜索安装GICVSCodeExtension插件。如下图：

最后，enjoy your project

HotReload 功能

使用HotReload功能的话建议使用脚手架通过模板3或者模板3以上的模板来创建项目。 GICVSCodeExtension插件在启动http server的同时会创建一个websocket server，以便在project中通过websockt获取HotReload命令。

当你在VSCode中使用cmd+r快捷键后，插件就会发出一个HotReload指令，所有连接到websockt server的设备都能收到该指令，进而重新加载整个应用。你无需使用XCode重新编译应用就能获得实时查看修改的能力。

HotUpdate

如果你使用脚手架通过模板4或以上的模板来创建项目，那么配合VSCode的插件就能获得HotUpdate的功能。

运行应用后，修改你project中的package.json文件中的version字段，并且修改项目中的任意样式，然后点击应用中的检查更新按钮，你会发现刚刚的修改生效了，并且显示的版本号也修改了。

HotUpdate功能不同于HotReload。HotReload仅仅适用于开发，方便你在开发的时候无需重新编译整个iOS工程就能实时查看修改的UI、逻辑。而HotUpdate适用于app已经发布后的热更新、热修复。

插件配置

首先按照下图所示打开VSCode的配置页面。

然后进入GICXMLLayout的配置选项。如下图。

GICXMLLayout目前提供了4个配置项。

1. Behaviors。

   这个配置项用于你提供自定义的behavior配置，通过这个配置，可以使得VSCode可以识别你定义的behavior元素以及属性。主要是提供智能提示功能。

2. Elements

   这个配置项用于你提供自定义元素的配置，通过这个配置，可以使得VSCode可以识别你定义的元素以及属性。主要是提供智能提示功能。

3. Http Server Port

   这个配置用来提供在使用HotReloading功能的时候Http服务器的端口。

4. Project Folder Name。(不建议配置)

   这个配置用于，如果你的项目不是从脚手架创建的，而是自己创建的，并且项目结构也不是按照范例创建的，这个配置就允许你自定义工程文件夹，以便插件能够提供完整的功能。

以上配置默认都是全局配置，如果你需要对某个工程单独进行设置，那么就需要在workspace setting一栏设置，如下图。

修改完配置以后右键选择初始化，使得配置生效

创建页面/JS文件

你可以使用ctr+cmd+n的快捷键来创建新的页面，或者通过在explorer中右键选择来创建新的页面或者JS文件，如下图。