StreetVoice 如何使用 Django 整合 React.js 開發

前一陣子 StreetVoice 終於找到了一位前端工程師, 進來後便請她開始研究 React.js, 主要用來改寫 SV 網站上的音樂播放器, 之後再來把 SV 部分的東西元件化。

而我則是研究 React 怎麼應用在 Django 專案上, 以及後續的 deployment 整合, 所以也學了一些 react 相關的東西。

目前 SV 使用 webpack 搭配 babel 來編譯 React 的 JSX, 還有使用 ES6 語法 (好啦, 還沒真的用上)。

而 Django 就透過 webpack 的外掛 webpack-bundle-tracker 來進行整合。 這個外掛主要的作用就是在 webpack 編譯時, 一併輸出編譯相關的資訊, 像是這次打包的檔案名稱等資訊, 方便讓 Django 讀取、使用。

輸出的檔案 webpack-stats.json 的內容大致如下:

{
  "status":"done",
  "chunks":{
   "app":[{
      "name":"app-0828904584990b611fb8.js",
      "path":"/assets/bundles/app-0828904584990b611fb8.js"
    }]
  }
}

這樣就可以透過這個檔案, 知道 webpack 編譯出的檔案名稱叫什麼。

而 Django 這邊這是採用了一個套件叫 django-webpack-loader, 透過前述的 webpack-bundle-tracker 所輸出的 webpack-stats.json, 來讓 Django 知道 webpack 打包出哪個檔案, 來 render 相關的 tag 輸出 html。

做好基本設定, 指定 webpack-stats.json 的路徑後, 這時只要在 template 裡面 render 這個 bundle 即可。

{% render_bundle 'player' %}

其實先前有試著用 django-compressor 搭配 babel 來自動編譯 JSX, 可是這樣的方式, 每次都會需要花上非常久的時間在編譯 JSX, 使得開發環境慢上許多, 後來就放棄這個方案了。

目前使用的方案呢, 搭配 webpack-dev-server 以及 HMR ( Hot Module Replacement ) 這個神奇的功能, 便可以達成馬上更新畫面上的 DOM 異動, 速度比起以前用的 livereload 都還要快, 因為連頁面更新都不需要, 實在是很神奇啊。

不過, 因為用了 webpack-dev-server 在開發環境上負責處理 js 檔, 所以除了原本的 ./manage.py runserver 外, 還得多跑個 npm run watch 來偵測 js 檔是否有異動, 如果有異動的話, 則會透過 HMR 馬上更新畫面。 我想, 改天得寫個 django command 把這兩個 command 整合在一起。

本篇因為要牽涉到的技術活實在太多, 所以只講基本概念, 其他都可以透過 django-webpack-loaderwebpack-bundle-tracker 這兩個 package 來了解整合的細節。

另外, 關於 React 的 Isomorphic 還在研究中, 改天有空, 研究完再說。

目前 SV 持續徵人, 有興趣寫 Python / Django 的人請來信 tzangms [at] streetvoice.com, 不過只要你自己覺得聰明, 熱愛寫程式, 學習能力強就來吧, 不一定要有 Python / Django 的經驗。

tzangms

Read more posts by this author.

Subscribe to Oceanic / 海海人生

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!