初識 Rax (Web & Weex)

Rax 是一款類 React 語法的前端框架，其與 React 的最大不一樣在於：React 用於 Web 頁面的渲染，而 Rax 的目標則是 通用的跨容器的渲染引擎。

咱們能夠從 Weex 的架構中理解何爲 跨容器。

Weex 架構

Weex 是一款輕量級的移動端跨平臺動態性技術解決方案。咱們能夠將 Weex 總體劃分爲 DSL 和容器（運行時環境）兩部分。

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 頁面：http://yourip:port/index.html
• Weex 頁面：http://yourip:port/index.js

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初探