Introduction
本文档主要介绍了 Mesh Packages 的概念和构架，开发 Mesh Packages 的项目结构以及项目配置的指导
Mesh Packages 是广州奇志信息科技有限公司 开发的一套基于自身研发的 JS 引擎，实现对大疆全系列无人机进行操控、航线规划、协同飞行的功能包。通过加载在Mesh软件中，可以实现由简单的 Javascript 的开发完成特定的飞行方案设置并运用到丰富的场景中。
其本质是在书写在Mesh软件中，一个功能包的页面渲染逻辑以及与用户的交互逻辑。其余的逻辑如与 Mesh 后台的交互、与飞机 SDK 的交互都已经由 Mesh 处理完毕并封装成接口暴露给 Javascript 层，无需开发者操心。开发者只需要根据本 Wiki 里的文档进行调用即可。
Mesh Package 的基本架构、与原生层、飞机和服务器的关系如下
从上图可以看到，开发者触碰到的只是最顶端的 Package 的开发，开发中涉及到对飞机的操控、飞机状态的获取以及与服务器的连接，都由原生层处理好并暴露出 JS API 供 package 调用。
其中原生层暴露的 JS API 可以在 JS API 文档 中查看
本文档假设读者已经对 Javascript、HTML 的布局和前端框架的运用已经有基本的了解
首先请确保系统安装了 node 环境，推荐安装 yarn 来执行 npm 相关命令
├── README.md
├── dist // 项目打包目录(yarn dev 之后)
│ ├── package.js
│ └── resource
│ └── images
├── envoy.config.js // envoy config 文件
├── package.json // 依赖和配置的定义
├── src // 所有开发代码都放在该目录下
├── resource // 防止 package 中的静态文件
├── index.js // package 的入口主文件
├── store.js // 使用 mesh-envoy-mobx 中暴露的 observable 和 action 来定义的数据管理 store
├── featureManager.js // 继承 mesh-envoy 中暴露出来的 featureManager, 实现 featureControl 相关事件的监听
├── i18n // 可使用 mesh-envoy 中封装好的 i18n 来定义 package 中使用的标签，以支持多语言
├── Components //
├── yarn.lock // 依赖控制
├── eslintrc // (可选) 定义 eslint 的语法检查规则
├── .babelrc // babel 的配置文件
└── zip // serve 的文件夹，客户端实际拿到的 zip 包
创建一个项目文件夹并定位到其中
mkdir mesh-hello-world
cd mesh-hello-world在根目录下创建 package.json 文件，可以使用下面的示例作为基础，下面示例中的依赖均为 必要的依赖。开发者可根据需求自行添加其他依赖。
{
"name": "mesh-package-example", // package 的名字，开发者可自行定义
"version": "1.0.0", // package 版本，开发者可自行定义
"description": "", // package 的描述，开发者可自行定义
"main": "src/index.js",
"scripts": {
"dev": "nodemon --ignore dist --ignore zip --exec envoy-devtool", // 使用 envoy-devtool 来打包并在本地开放一个小型服务器 serve package 的指令，开发者也可以按喜好自行定义
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"mesh-envoy": "^2.1.1", // mesh 的 js 引擎
"mesh-envoy-component": "^2.1.1", // mesh package 中的 Component 基类
"mesh-envoy-devtool": "^2.1.1", // mesh package 开发的打包工具
"mesh-envoy-mobx": "^2.1.1", // 基于 mobx 做的 mesh 中的数据管理工具
"mesh-envoy-tag": "^2.1.5", // mesh package 中用到的所有 tag 的定义，继承 Component
"mesh-envoy-camera": "^2.1.8" // mesh package 中负责与相机进行交互
},
"devDependencies": {
"nodemon": "^1.11.0", // 用于搭建本地的环境
// 以下依赖为 babel 相关确保 js 语法糖和编译的一致性
"babel-eslint": "^8.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-snabbdom-jsx": "^0.4.0",
// 以下依赖为 eslint 相关的依赖，用于做语法的检测
"eslint": "^4.1.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-node": "^5.1.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^3.0.1"
}
}以上依赖中除了 mesh 相关的依赖之外，可以去官网阅读文档了解更多信息： babel, eslint
定义好 package.json 后执行安装命令：
yarn在根目录下创建 .eslintrc 和 .babelrc 文件
建议按如下配置：
.eslintrc
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"plugins": [
"envoy",
"react"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"node": true,
"browser": true,
"es6": true
},
"rules": {
"space-before-function-paren": "off",
"react/react-in-jsx-scope": "off",
"react/display-name": "off",
"react/prop-types": "off",
"react/no-deprecated": "off",
"react/jsx-key": "off",
"brace-style": [
"error",
"allman"
],
"no-unused-vars": [
"warn",
{
"argsIgnorePattern": "^_.*"
}
],
"no-console": [
"warn"
],
"no-mixed-spaces-and-tabs": [
"error"
],
"envoy/attribute": 2,
"envoy/children": 2,
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
]
},
"globals": {
"mesh": true
},
"settings": {
"react": {
"pragma": "envoy" // Pragma to use, default to "React"
}
}
}.babelrc
{
"presets": [
[
"es2015-rollup"
]
],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties",
"transform-async-to-generator",
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}],
["babel-snabbdom-jsx", {
"pragma": "envoy.createVNode"
}]
]
}推荐配置如下：
module.exports = {
name: process.env.NODE_ENV === 'production' ? 'personal' : 'test',
engineVersion: '4.1',
accessKey: <发布 package 的 accessKey> // 请联系奇志信息科技有限公司获取
privateKey: <发布 package 的 privateKey> // 请联系奇志信息科技有限公司获取
}这里的配置主要是用于发布 package 使用的，其中：
- name: 发布 package 后的名字
- engineVersion: 发布 package 适配的 Mesh 引擎版本
- accessKey/privateKey: 发布 package 使用的秘钥。
一般来说，在本地开发时该配置不是必要的，而发布 package 前请联系奇志信息科技有限公司获取合适的参数。
做完以上步骤后，基本的环境配置已经完成了。现在一切就绪，接下来可以创建 src 文件夹准备开发一个简单的 package
请阅读下一文档 开发一个简单的 package