Saber 的安装与管理都是通过强大的 edp

Saber 1.0 要求 edp 版本 >= 1.0.0

Saber 以 edp 扩展 的形式，提供了强大构建工具 edpx-mobile，我们需要按照以下顺序搭建开发环境

edp 基于 node.js 和 npm

• 安装包下载 http://nodejs.org/download/

• Homebrew 方式安装: homebrew install nodejs

npm install -g edp

若想了解更多的安装说明可移步这里

edpx-mobile在第一次使用mobile相关命令时会自动安装，也可以使用以下方式手动安装

edp install edpx-mobile

至此，Saber 开发环境搭建完毕。 亲，是不是很 easy ~~

安装后，就可以使用 Saber 丰富的 CLI 命令了

• init 项目初始化

• add 模块添加

• start 调试器管理

edp mobile init xxx

环境搭建好了，让我们来创建一个实际项目来体验下 Saber 带来的快感 ~~

新建一个 SPA(Single Page Application) 项目

edp mobile init spa

项目构建时，所有默认的依赖模块都会自动导入的哦 ~~

项目结构如下:

├───  .edpproj/
├───  dep/
├───  node_modules/
├──┬  src/
│  ├───  app.js
│  └───  config.js
├───  edp-build-config.js
├───  edp-webserver-config.js
├───  edp-watch-config.js
├───  index.html
├───  module.conf

默认的依赖模块包括mvp框架saber-firework、异步交互模块saber-ajax与UI样式框架rider-ui，同时也引入了方便开发的saber-lang、saber-dom 、saber-promise等基础组件

至此，一个SPA项目创建初始化完毕 ~~

啊!! 遇到繁琐的字符串处理了，show me the string ～

edp import saber-string

var string = require( 'saber-string' );
...

哈哈哈 ~~ 果然简单 !

Saber 提供了丰富的模块 供移动业务开发使用。没有做不到，只有您想不到

万事俱备，只欠coding ~ 那就添加几个业务模块玩玩

Saber 提供了灰常方便的 add 命令哦~~

让我们来添加一个基本的 完整模块 (含 路由、MVP、模板) 试试

edp mobile add /hello

没错，就是这么简单、可依赖 ~~

此时，路由配置文件 config.js 会自动增加对应配置信息

{ path: '/hello', action: require('./hello') }

以及自动创建相关的 MVP 和 Template 文件

./hello.js
./helloModel.js
./helloView.js
./hello.tpl

至此，我们创建了一个完整的 /hello 模块 ~

不满意？ 我们可以添加稍微复杂一点的

edp mobile add /goodbye/saber

是不是简单依旧？

此时，路由配置文件 config.js 会自动增加对应配置信息

{ path: '/goodbye/saber', action: require('./goodbye/saber') }

以及自动创建相关的 MVP 和 模板 文件

./goodbye/saber.js
./goodbye/saberModel.js
./goodbye/saberView.js
./goodbye/saber.tpl

至此，我们创建了一个完整的 /goodbye/saber 模块 ~

还不满意？ 我们再添加个 /miss/ 模块 (注意末尾的 /)

edp mobile add /miss/

此时，路由配置文件 config.js 会自动增加对应配置信息

{ path: '/miss/index', action: require('./miss/index') }

以及自动创建相关的 MVP 和 模板 文件

./miss/index.js
./miss/indexModel.js
./miss/indexView.js
./miss/index.tpl

至此，我们创建了一个完整的 /miss/ 模块 ~

烦捆绑？要特殊服务？ 有! 看客官需要，应有尽有:

我就想加个 Action

edp mobile add action /play/snooker

config.js 会自动增加对应配置

{ path: '/play/snooker', action: require('./play/snooker') }

以及自动创建对应的Action文件

./play/snooker.js

我就想加个 Model

edp mobile add model /play/saber

对应的Model文件会自动创建

./play/saberModel.js

我就想加个 View

edp mobile add view /play/yard

对应的View文件会自动创建

./play/yardView.js

我就想加个 Template

edp mobile add template /play/game

对应的Template文件会自动创建

./play/game.tpl

一直埋头 coding 不知效果如何，好忐忑 ~

表怕，Saber 早有准备，内置了 WebServer 支持

edp mobile start server

打开浏览器，访问以下地址欣赏吧 ~

http://localhost:8848

想给小伙伴们看？用启动后的输出提示里的带IP的URL就行

edp INFO EDP WebServer start, http://192.168.1.2:8848
edp INFO root = [/your_app_root_path], listen = [8848]

讨厌 F5，就要 Live Reload ?

edp mobile start watch

试试，随便改个文件 保存 下，看看浏览器是不是神奇的自动刷新啦。。啦。。

我很懒，我就想一个命令全都搞定，有 WebServer 也有 LiveReload !!

edp mobile start

这下清爽，舒服了吧 ~

Coding 完工，是时候来看看如何发布编译啦 ~

edp build --stage=release

是的，您没看错，就是这么简单 ~~

编译输出目录结构大致如下:

├──┬  asset/
│  ├───  ...
│  ├───  app.js
├──┬  dep/
│  ├───  ...
│  └───  saber-firework/
├───  index.html

带 --starge=release 和 不带有什么区别？

编译配置默认存在两种处理器组合 default 和 release

release 组合会进行压缩、合并等更深度的优化工作

想了解更详细的 edp build 使用 ?

edp build --help

您会找到您所需要的