创建开发工程
创建JSN模块开发工程可以使用以下指令：
生成的基本的模板开发工程比较简单，目录结构大致如下，基本的模板工程包含了一个JSNative的”hello,world”页面。
demo
├── app.js
├── index.html
├── lib
│ └── package.json
├── project.json
└── view
└── index.vue
2 directories, 5 files
|
JSNative模块工程的project.json配置项中的插件配置启用了jsnative插件，改插件赋予了工程JSNative代码编译的能力。
添加生成视图
可以参考视图的概念和定义章节进行视图的定义和生成。
注意事项视图中页面功能的实现必须符合JSNative的规范，只允许使用JSNative中支持的语法来开发工程，切忌不可以纯H5开发的代码经验来实现JSNative的视图。
使用原生接口
为了方便开发者使用调用原生API，我们提供了light-sdk模块，具体的使用方法如下：
- 在源代码目录的lib目录执行：
npm install -d --save light-sdk
- 在需要使用light-sdk的js或者vue文件中使用如下代码：
import LightSDK from “light-sdk”
- 具体的使用指令及API文档参考light-sdk的API文档
运行JSNative模块工程
JSNaitve项目可以通过：light release -wb 指令启动并启动开发模式。
其中-w参数是指编译是会开启watch选项，当发生代码变更的时候自动触发代码编译；-b选项表示在应用编译完成后打开浏览器并在默认3000端口监听http请求，以对资源进行一个简单的本地server的运行查看和调试。端口号也可以自定义。
light release -wb
[2019-04-16 17:47:42][INFO] 清除/tmp/jsnative1555408061974-6861837146828487目录
[2019-04-16 17:47:42][INFO] 拷贝/tmp/jsnative到/tmp/jsnative1555408061974-6861837146828487目录
[2019-04-16 17:47:42][INFO] jsnative@1.0.12插件加载成功
[2019-04-16 17:47:42][INFO] 阶段：prepare，调用插件type-vue@1.1.17开始
[2019-04-16 17:47:42][INFO] 阶段：prepare，调用插件jsnative@1.0.12开始
[2019-04-16 17:47:42][INFO] 阶段：prepare，调用插件jsnative@1.0.12成功
[2019-04-16 17:47:42][INFO] 阶段：prepare，调用插件type-vue@1.1.17成功
[2019-04-16 17:47:42][INFO] 处理资源装配：index
[2019-04-16 17:47:42][INFO] 处理脚本资源注入：index
[2019-04-16 17:47:42][INFO] 阶段：build，调用插件type-vue@1.1.17开始
[2019-04-16 17:47:43][INFO] 准备编译jsn环境下的jsnative文件...
[2019-04-16 17:47:46][INFO] 阶段：build，调用插件type-vue@1.1.17成功
[2019-04-16 17:47:46][INFO] 阶段：serve，调用插件jsnative@1.0.12开始
[2019-04-16 17:47:46][INFO] 阶段：serve，调用插件jsnative@1.0.12成功
[2019-04-16 17:47:46][INFO] 已开启本地资源监听...
[2019-04-16 17:47:46][INFO] 资源编译成功
|
编译过程中的日志信息大致如上（省略了编译进度的细节部分日志信息），可以看出完整的编译流程中触发了JSNative插件和type-vue插件的运行。
可以重点看一下打开页面手机预览模式的控制台后，右侧展示的部分。
- 点击资源详情的链接可以打开编译模块的详细视图，包括每个模块参与编译的时机以及大小
- 二维码可以直接被
lightview扫描以展示在真机设备上的JSNative运行效果