完全在瀏覽器中開發React應用

08-11

完全在瀏覽器中開發React應用

來自專欄進擊的React80 人贊了文章

React是網頁技術，但是通常寫代碼都是開發者的電腦中，部署運行也需要要在電腦中build，這是常識，不過，其實這一切都可以在瀏覽器中搞定，這就是今天我們要講的內容。

作為一個前端工程師，我一直有一個夢想，就是完全在瀏覽器中工作，隨著技術的發展，這已經不是一個夢了，市面上有很多產品滿足這個需要，這裡我們用coding.net來演示，這個工具有免費版，大家可以註冊試試。

順道說一嘴，據說這個coding.net的代碼編輯器Cloud Studio也是用React開發的，今天我們是用React開發的應用來開發React應用（有點繞口哦:-)

1. 任務分解

完全在瀏覽器中開發React應用，看起來是一個艱巨任務，但是就和把大象放進冰箱一樣，只要分解成若干步驟，都好辦。前幾天我的Live《實話實說「敏捷「軟體開發流程》中介紹了Scrum和Kanban的開發流程，都用上了「任務版」（Task Board），在coding.net中的任務看板就是一種Task Board。

我們把這個「工程」分為四個任務：

創建代碼編輯環境
在網頁中導入React
讓React可以在網頁中運行
部署網頁

通過「任務看板」，每個任務進行到什麼階段，一目了然。

2. 開發過程

首先來完成第一個任務「創建代碼編輯環境」，順便要吐槽一下，我經歷的所有公司里，新員工入職都是一關，每個開發團隊都有自己的坑，新員工要搭建開發環境，都要踩一遍這個坑，很容易讓新兵垂頭喪氣。理想情況下，開發環境設好，新員工入職第一天分配到一個開發環境，直接就可以開工幹了。

在coding.net里創建一個項目，選一個License，創建一個index.html文件，搞定如下。

上來就擼起袖子干那就太土了，最好不要在master分支上直接開工，要建一個分支，我個人的習慣，開發分支都以task/開頭，這裡就建立一個叫task/enable_react的開發分支。

我們用coding.net最新的Cloud Studio IDE來編輯代碼，這個界面比黑白的純文本好看很多。在Cloud Studio中導入剛才的創建的項目，可以在左下角用界面選擇task/enable_react開發分支，你要是命令行黨，也可以在底部的命令行界面用git命令切換分支。

好，基本環境搞得差不多了，一切都是在瀏覽器中進行的，接下來處理第二個任務「在網頁中導入React」，在index.html的head部分，輸入下面的代碼。

<head> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> </head>

這是從CDN中直接獲取React和React-DOM兩個庫，http://unpkg.com這個CDN的內容就是npm上發布的內容，沒有被牆，可以放心使用，umd版本代表可以直接在瀏覽器中使用。

不過，這樣只是導入了React和ReactDOM這兩個類，讓我們可以使用React.createElement這樣的方法，卻依然不能用JSX，簡單說，你可以在網頁中這麼寫。

React.createElement(SomeComponent, {foo: bar})

但是沒法這麼寫。

<SomeComponent foo="bar" />

如果寫代碼有這樣的局限，那也沒什麼搞頭了，誰會願意寫那麼多React.createElement呢！

所以，還有第三個任務要解決「讓React可以在網頁中運行」，更準確地說，是「讓JSX可以在網頁中被解析」。

在Cloud Studio里有Terminal，可以執行命令行指令來做babel，不過，這裡我們介紹更簡單的方法，在網頁中直接進行babel轉換，在head中添加下面的代碼。

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

這行代碼導入的是babel-standalone，可以在網頁運行時執行babel，也就能夠把JSX轉化為React.createElement的字樣（??FBI警告：這招玩玩就行，實際產品環境別用babel-standalone，還是用babel轉譯的好，那樣性能更高）

最後，我們在body部分添加上使用React的代碼。

<body> It works! <div id="app"></div> <script type="text/babel"> const app = document.getElementById(app); const RootCompoent = () => (<div>It works with React</div>); ReactDOM.render(<RootCompoent/>, app); </script> </body>

可以看到直接使用了JSX，不過，這麼寫是不是真的好使呢？還要運行一下才知道。

一種方法是直接部署當前分支上的代碼，但是，最好還是只部署master這種主幹分支吧。在開發分支上，能夠起一個臨時的環境就好。

在Cloud Studio底部有命令行界面，默認就可以用python啟動一個簡單的HTTP伺服器。

python -m SimpleHTTPServer 8080

在右側Access URL（訪問鏈接）中，開啟一個8080埠就好。

訪問產生的臨時鏈接，會是類似https://ouyqqp-8080-lahzbs.box.myide.io/ 這樣的一個URL，然後，噹噹噹噹——

Yeah！It works！It works with React!

3. 完成部署

最後一個任務「部署網頁」，就更簡單了，在Cloud Studio的命令行中用git命令commit代碼，做戲做全套，應該發一個Pull Request（合併請求），這也可以在coding.net中搞定。

在Cloud Studio中可以直接一鍵部署，對於這樣一個簡單網頁，可以做靜態部署，當代碼合併到master分支上之後，我的例子就部署到 http://morganchenghulu.coding.me/Sample/ ，可以看到上面It works一樣的界面。

搞定！

不過，我剛才也說過了，babel-standalone並不適合於生產環境，你不能指望用戶的電腦強悍到可以輕鬆實時轉譯複雜的React組件，所以，還是要利用真正的環境。

4. 真正的環境

在Cloud Studio的右側可以選擇開發環境，默認是python，可以切換為Node.js，之後底部的命令行里就可以執行node那一套指令了。

這個Node環境里預裝了Facebook提供的create-react-app應用，可以輸入下面的指令輕鬆創建React應用。

npx create-react-app samplecd samplenpm start

然後，你就可以創建一個3000埠的訪問鏈接，看到下面這個熟悉的界面了。

接下來，就是慣常的React開發套路，用npm run build打包，然後部署到產品環境，不過，這一切都可以在瀏覽器中完成，Cloud Studio是一個窗口，透過Cloud Studio看到的是在雲上運行的伺服器環境。

總結

技術發展真是日新月異，有了Cloud Studio這樣的工具，已經完全可以在瀏覽器中完成整個開發過程了。而且React並不是非要在你的電腦上轉譯之後才能用，完全可以就用一個網頁全部搞定；當然，要達到產品的質量，還是要伺服器端轉譯的，這也一樣可以在瀏覽器中用Cloud Studio完成。

很明顯高，完全在瀏覽器中工作這麼夢想已經被實現了。