初识 Rax (Web & Weex)

2,982 阅读3分钟

Rax 是一款类 React 语法的前端框架,其与 React 的最大不同在于:React 用于 Web 页面的渲染,而 Rax 的目标则是 通用的跨容器的渲染引擎

我们可以从 Weex 的架构中理解何为 跨容器

Weex 架构

Weex 是一款轻量级的移动端跨平台动态性技术解决方案。我们可以将 Weex 整体划分为 DSL 和容器(运行时环境)两部分。

image | center

DSL 是 Domain Specific Language,即领域特定语言,是为了解决某些特定场景下的任务而专门设计的语言。常见的 DSL 有很多:

  • 正则表达式
  • HTML&CSS
  • SQL

在 Weex 下,开发工作主要聚焦于使用 Weex DSL 编写代码,然后将 DSL 代码打包生成 xxx.bundle.js 文件,这就完成了主要的开发工作。xxx.bundle.js 文件交给 Weex 容器(运行时环境)渲染成 Native 组件,运行过程中可以调用特定的 Native 功能。

总的来说,一个基本的 Weex 容器(不考虑扩展 Native 能力),其最终的输入就是由 Weex DSL 打包而成的一个或多个 xxx.bundle.js 文件。基于这一点,我们继续探究 Rax 开发该怎么着手。

上手 Rax

Rax 的核心功能是 跨容器,即不仅可在 Weex 容器下运行,也可在 Browser 容器下运行。Rax 的跨容器特性是通过抽象出 Driver 层来实现的。虽然 Rax 文档中并没有具体介绍,但从 Rax 团队博客和仓库中可以发现,Rax Driver已支持 Weex、Browser 、Server、WebGL、小程序等多个平台。

在 Rax Driver 层之上,统一采用类 React 语法编程。

接下来记录开发一个简单的 Rax 项目的过程。

1. 安装 Weex Playground App

Weex Playground 提供了 Weex 运行时环境。下载安装 Weex Playground App 后,可在局域网中加载由 Rax 打包生成的 xxx.bundle.js 文件,进行实时预览。

2. 安装 rax-cli 脚手架工具

rax-cli 是 Rax 提供的脚手架和集成开发工具。

npm install -g rax-cli

3. 初始化工程

rax init hello-rax

初始化过程中会让你选择初始化为 Web 工程或 Weex 工程。

4. 运行

yarn start

根据 Issue #1018,当前的 rax-cli 已不再像文档中所描述的显示二维码,需要手动拼接 URL。

拼接规则为:

Web 页面可直接在浏览器中打开预览,Weex 页面需要自行将上述 URL 生成二维码并使用 Weex App 扫描预览。

5. 打包

yarn build

在 Rax(Weex) 工程中打包生成的是用于 Weex 的 xxx.index.js 文件,该文件位于 build 目录下,文件名为 index.js

打开该文件可以看到,Weex 文档中所描述的框架类型标记位于首行。

// {"framework" : "Rax"}

将该文件拷贝到 Weex 工程的 dist 目录下覆盖原有的 index.js,便可在 Weex 工程中预览。其实,在 weex-toolkits 下使用 Vue.js 开发,其打包后的文件也是 dist/index.js

若再想编译为 iOS/Android APP,则使用 Weex 的编译流程即可。这也是为什么在 Issue #378 中,Rax 的主要开发者 yuanyan 说:

只需要按weex文档打包出weex app就可以使用rax

如有错误,欢迎指出、讨论!


参考链接:

  1. Rax 系列教程(上手)
  2. Rax 系列教程(native 扫盲)
  3. Weex 文档
  4. Flutter和Rax初探