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

如有錯誤，歡迎指出、討論！

參考連結：