React 關於工具整合

工具整合

一般來說,每一個專案使用不同的建置方式,系統環境,以及部署方式。React 試著盡可能的讓一切與系統環境沒有任何相依性。
意味著官方盡可能讓所有平台都能用一樣的方式運行 React。

React

React CDN

下載頁面官方提供了 React 的 CDN。這些預先編譯的檔案使用的是UMD 模組格式
將它們放置到 <script> 標簽中就可以注入 React 到您的全域環境中。在 CommonJSAMD 的環境下只要引入就能馬上使用。

UMD 提供兼容多種環境的特性。為了達到這個目的,一般狀況,但不是全部,UMD 模組格式會把程式碼包進一個立即調用的函式(Immediately Invoked Function Expression,IIFE)中。

使用 Git 中的 master

React 提供了一份說明,協助您在取得 GitHub(https://github.com/facebook/react) 後執行編譯建置。
同時也提供了 CommonJS 方式的模組在 build/modules 目錄底下,您可以將它們放到任何環境或者支援 CommonJS 的封裝工具。

JSX

瀏覽器下的 JSX 編譯

如果您偏好使用 JSX ,您也可以在官方下載頁面找到這個可以在瀏覽器執行時期編譯 JSX 的 js 檔案 JSTransformer,以讓您可以在開發時方便的使用。
單純的使用 <script type='text/jsx'> 嵌入您的程式碼,搭配 JSX Transformer 即可。不過請注意要加入 /** @jsx React.DOM */ 在開始的地方,否則 JSX Transformer 將不會執行轉譯的工作。

注意:
瀏覽器版的 JSX 編譯檔案相當大,且必須耗費多餘的與要呈現的結果無關運算,這應該要避免。千萬別在發佈的產品上使用。

發佈: 預先編譯 JSX

如果您已經有安裝 npm 那麼您可以很輕鬆的直接執行 npm install -g react-tools 來安裝 jsx 的指令工具。這個工具將會先幫你把 JSX 格式的檔案轉換為原始的 Javascript,然後您就可以直接使用。
當然您也可以使用自動編譯的方式,透過 jsx --watch src/ build/,如此一來當目錄有任何變更的時候,指令工具就會自動幫您編譯。
需要更多詳細的用法資訊請執行 jsx --help

實用的開源專案

開源碼社群已經有許多整合 JSX 的工具,查閱 JSX 整合工具 可以找到適合您的開源專案或工具。

作者

andyyou(YOU,ZONGYAN)

發表於

2014-09-13

更新於

2021-12-12

許可協議