React Native 的出現(xiàn),，讓前端工程師擁有了使用 JavaScript 編寫原生 APP 的能力。相比之前的 Web app 來說,，對(duì)于性能和用戶體驗(yàn)提升了非常多,。

但是 React Native 的代碼只兼容兩個(gè)平臺(tái)（iOS 和 Android），并沒有兼容 Web 端訪問,。這里是因?yàn)?Facebook 開發(fā)人員認(rèn)為 Web 端天生兼容性就巨麻煩，而且平臺(tái)差異性是注定存在而且也要保留的,，所以 React Native 的目標(biāo)是Learn once, write anywhere,，而不是Write once, run anywhere。

然而Write once, run anywhere又是一個(gè)剛需,。從產(chǎn)品還是用戶的角度試想一下,，APP 的安裝成本還是很高的,，如何讓用戶馬上體驗(yàn)到你產(chǎn)品的功能再?zèng)Q定是否要安裝？此外,，尤其是重要的產(chǎn)品,，除了 APP 客戶端之外，還要有一套兜底的 Web 端以便用戶在某些特殊場(chǎng)景下使用,。React Native 可以讓你寫一份代碼跑在兩個(gè)平臺(tái),，但是你卻還要再寫一份 Web 的一模一樣的應(yīng)用。就顯得十分蛋疼了,。

于是 React web 就出現(xiàn)了,。

簡(jiǎn)單的一句話描述 React Web 就是：它幫你把 React Native 的組件做了一個(gè) Web 端的實(shí)現(xiàn)，并提供相關(guān)打包工具,，讓你可以直接打包出一份可以跑在 Web 端的代碼,。

為了重點(diǎn)突出轉(zhuǎn)換過程，這里使用 React Native init 的最簡(jiǎn) Demo 來做實(shí)驗(yàn)（名字叫 Awes 代碼在https://github.com/taobaofed/demo/tree/gh-pages/react-web）,。React Web 已經(jīng)把 React Native 比較復(fù)雜的 UI Explorer Demo 跑起來了,，所以只要你的代碼能跑在 iOS 或者 Android 上面，你基本不用擔(dān)心有什么組件上的問題,。當(dāng)然如果有,，可以馬上提 Issue 過來，我們有一個(gè)小組在支持 React web ：）,。

這一步操作主要是安裝react-web包以及相關(guān)依賴,，并配置 webpack 打包腳本等。

為了簡(jiǎn)化這一步操作,，我們開發(fā)了命令行工具react-web-cli只需要執(zhí)行兩行命令即可,。同時(shí)命令行工具還支持啟動(dòng)調(diào)試服務(wù)器、打包等功能,，在后面介紹,。

安裝 cli 工具：

npm install react-web-cli -g

安裝配置 React web 等：

react-web init <當(dāng)前項(xiàng)目目錄>

執(zhí)行完成之后，會(huì)在你項(xiàng)目目錄下面npm install相關(guān)庫,，并自動(dòng)創(chuàng)建web/webpack.config.js文件,，里面有一份寫好的配置。此時(shí)目錄結(jié)構(gòu)為：

.
├── README.md
├── android/
├── index.android.js
├── index.ios.js
├── ios/
├── package.json
└── web/
└── webpack.config.js

每個(gè)項(xiàng)目都需要有一個(gè)入口文件,，通常用來引入調(diào)用其他組件并初始化項(xiàng)目,，比如index.ios.js表示 iOS 平臺(tái)上的該項(xiàng)目的入口文件。為了符合 React Native 的文件命名規(guī)范,，我們創(chuàng)建一個(gè)index.web.js作為入口文件,，并且需要在 webpack 中指定該文件為入口文件。打開web/webpack.config.js文件，修改config變量：

var config = {
paths: {
src: path.join(ROOT_PATH, '.'),
index: path.join(ROOT_PATH, 'index.web'),
},
};

然后我們創(chuàng)建index.web.js文件,。這個(gè)文件其實(shí)跟index.ios.js非常像,，只是略有不同。主要區(qū)別在于：iOS 只需要AppRegistry.registerComponent('Awes', => Awes);即可讓 Xcode 的 Native 代碼接收處理你的 JS 代碼,，而 Web 端是需要插入到 DOM 節(jié)點(diǎn)中才可以用,。因此我們需要在index.web.js最下面添加如下代碼：

AppRegistry.registerComponent('Awes',  => Awes);
if (Platform.OS == 'web') {
var app = document.createElement('div');
document.body.appendChild(app);
AppRegistry.runApplication('Awes', {
rootTag: app
});
}

然后在最上面require部分需要引入Platform組件。這樣配置部分就已經(jīng)處理完成了,，執(zhí)行react-web start命令即可啟動(dòng)調(diào)試服務(wù)器啦,！

可以隨便修改試下，跟 React Native 模擬器里面的體驗(yàn)幾乎一樣,。

當(dāng)你修改開發(fā)完,，并對(duì) Web 端也測(cè)試好了，就可以打包發(fā)布了,。react-web-cli工具打包的命令是：

react-web bundle

打包完成后,，文件會(huì)存放在web/output/目錄下面，可以直接打開index.html（如果 app 有請(qǐng)求操作,，需要起本地服務(wù)器查看）,，再檢查一下就可以發(fā)布了。

好奇的同學(xué)看到這里可能會(huì)有一些疑問,，上面命令行工具的一些命令做了什么事情？為什么 React web 將 React Native 代碼打包出一份用在 Web 端的代碼,？React web 安全可靠嗎,，里面都是什么東西？

這里簡(jiǎn)單的介紹下 React web 的實(shí)現(xiàn)原理和上面步驟實(shí)際做的事情,。

React 將代碼與平臺(tái)環(huán)境分離,，多了一層，這樣開發(fā)者可以在平臺(tái)環(huán)境層面做一些處理,，使得同樣一份代碼適應(yīng)更多的平臺(tái)環(huán)境等,。

• 比如react-canvas按照 React 的語法書寫代碼，在平臺(tái)環(huán)境層面做一些處理（將你 React 代碼運(yùn)行并用 canvas 渲染）,，然后實(shí)現(xiàn)特定目標(biāo)（在移動(dòng)端提高性能）,。

• React Native 中，一份代碼能同時(shí)跑在 iOS 和 Android 上面,，也是一樣的道理,。React Native 團(tuán)隊(duì)在對(duì)應(yīng)平臺(tái)的 Native app 上面做了一些處理，使其可以解析執(zhí)行 React 語法的代碼,。

• 還有同構(gòu)（isomorphic）的應(yīng)用,，服務(wù)器端使用 React + Node.js 生成 HTML，客戶端使用 React 獲取進(jìn)行客戶端相關(guān)交互和功能，也是一樣的道理,。

為此，React v0.14.x 版本開始,，專門分成兩個(gè)庫react和react-dom,，其實(shí)是把對(duì)瀏覽器平臺(tái)的特殊處理剝離了出來，單獨(dú)變成了react-dom庫,。

React Native 比較特殊的地方在于,，組件最底層的實(shí)現(xiàn)是 Native 的實(shí)現(xiàn)，所以就不支持span,、div等標(biāo)簽,。而動(dòng)畫等，也是直接調(diào)用 Native 進(jìn)行界面渲染,。所以不支持 Web 端,，但是絕大部分組件，都是可以用 Web 技術(shù)進(jìn)行模擬實(shí)現(xiàn),。動(dòng)畫可以用 CSS3 ,、基礎(chǔ)元素可以用同等 HTML 標(biāo)簽?zāi)M、布局以及兼容性問題可以用 CSS 來處理,，所以 React web 只需要把 React Native 的組件用 Web 技術(shù)重新實(shí)現(xiàn)一遍,，借助 React 這一層，即可實(shí)現(xiàn)一份代碼運(yùn)行在多個(gè)平臺(tái)上面,。

舉一個(gè)非常簡(jiǎn)單的例子,，Text組件：

• React Native 的實(shí)現(xiàn)是調(diào)用了很多 React Native 底層的代碼實(shí)現(xiàn)的。

• 對(duì)于 Web 端,，輸出一行文本使用標(biāo)簽即可,，所以React web 的實(shí)現(xiàn)就直接搞一個(gè)標(biāo)簽，綁一些事件什么的就 OK 了,。

在UI Explorer demo中能跑起來的 React Native 組件,，你都可以放心的用。

做出了兼容 Web 端的組件,，那打包的時(shí)候豈不是要把所有要打包的組件中的require('react-native')全部更換成require('react-web')？不然怎么用的我的 Web 組件打包,？

強(qiáng)大的 webpack 附帶了alias配置項(xiàng)可以幫你解決這個(gè)問題：

resolve: {
alias: {
'react-native': 'react-web',
'ReactNativeART': 'react-art',
},
extensions: ['', '.js', '.jsx'],
},

這樣在打包時(shí),，但凡require('react-native')的地方全都用react-web包替換，而react-web的module.exports與react-native的保持一致即可讓代碼不替換也可以工作,。

此外配合插件還可以實(shí)現(xiàn)另外一種引入方法,，請(qǐng)看下面。

webpack 以及其他的支持 CommonJS 規(guī)范的打包工具，都會(huì)把文件中 require 的所有組件都打包在一起,。對(duì)于 React Native 來說代碼體積大小無關(guān)緊要,，而在 Mobile web 來說，就要稍微重要一些了,。特別是如果你的項(xiàng)目只需要Text組件,，但由于require('react-web')結(jié)果把所有的組件全部打包進(jìn)來了，就比較傷感,。

基于 webpack 插件,，還可以用另一種方式引入組件以解決這個(gè)問題，你可以叫它Haste方式,。使用這種方式需要加載 webpack 插件haste-resolver-webpack-plugin,，默認(rèn)的 webpack 配置已經(jīng)幫你加載好了，你可以直接在組件里面這樣用：

var Text = require('ReactText');

而不是以前那樣：

var {Text} = require('react-native');

這樣 webpack 打包時(shí),，對(duì)于前者,，只會(huì)把那一個(gè)組件內(nèi)容打包進(jìn)來，因此可以減小體積,、提升性能,。這是怎么實(shí)現(xiàn)的呢？

加載了插件的 webpack 打包時(shí),，會(huì)先掃描所有組件并讀取組件頭部@providesModule的信息（比如Text 組件的信息）,，然后當(dāng)其他文件中 require 了這個(gè)組件名稱，就會(huì)自動(dòng)定位到這個(gè)文件進(jìn)行打包,。同時(shí)還可以區(qū)分平臺(tái),，即便是同一個(gè)名字，打包時(shí)會(huì)區(qū)分平臺(tái)去打包對(duì)應(yīng)的文件（根據(jù) index.xxx.js 的命名規(guī)則確定文件）,。

在 Web 端兼容性是個(gè)非常麻煩頭疼的事情,，React Web 已經(jīng)盡力幫你抹平兼容性問題和代碼差異，盡可能的讓你減少改動(dòng)就可以創(chuàng)建 Web 版本的應(yīng)用,。但受限于 Web 端的一些固有限制（比如請(qǐng)求跨域）,，不可避免的就會(huì)有一些需要你改代碼的地方。

為此,，可以通過if (Platform.OS == 'web')的方式判斷目標(biāo)平臺(tái),，并針對(duì)性的做一些平臺(tái)兼容性處理。同樣的,，也可以將web替換為ios或者android判斷其他平臺(tái),。

歡迎踴躍嘗試，遇到問題可以隨時(shí)提 Issue 哦：）

作者：浩睿