Django項目前端工程化的探索

Django項目前端工程化的探索

不經過node層實現非SPA網頁開發的先後端分離。

技術棧：webpack + jade + es6 + scss + swig等

項目git: webpack-django-starter

需求

• 項目需求公司官網。

• SEO很重要

• 頁面簡單，基本是幾臺頁面，個別頁面有動態內容

• 後臺是Django

成品beta版（雖然有廣告之嫌）：

• http://www.bsy365.com/

咱們從前怎麼作？

以前開發過的一些多頁面網站都是在Django template目錄下直接寫Django模板（相似於寫PHP和JSP），js和css又要寫在Django項目的static目錄下。前端沒有工程化，前端代碼被肢解分離在後端項目的目錄裏。作過這樣項目的各位攻城獅應該都知道有多痛苦吧。

缺點：

• 想測試？你須要一套後臺環境

• 想livereload？要單獨起個livereload進程監控前端代碼的目錄，還要在頁面裏特別的嵌入一段代碼。livereload

• 想壓縮js和css？用django compressor吧。

• 想用jade？想用ES6？想用scss？想用npm管理依賴？應該都能作到，可是貌似都不太方便。

優勢：

• 無腦，簡單，人人都好上手

別人怎麼作？

• SPA
  Angular、Vue、React，用這些框架作個SPA，頁面不須要後臺渲染了，這樣前端能夠徹底從後端脫離出來，先後端的交互只經過ajax來拿數據。這幾個框架相比你們都很熟悉，優勢我就不用我說了，stater的項目在git上也處處都是。其中我我的最喜歡Vue，可是搜索引擎，尤爲是咱們大天朝的baidu爸爸對js支持的並很差，因此單純的SPA方式就不太適合咱們的需求了。

• 後端渲染的SPA和帶node層的大前端
  react和vue2.0的後臺渲染，淘寶的中途島 這些解決方案都是很精妙的，不得不佩服相處這些方案的人的睿智。然而咱們的項目實際上是比較簡單的，同事們都以爲沒有必要加個node層搞那麼複雜。（也許並不複雜，只是咱們沒有實踐過）

好吧！別人的作法不合適，只能本身想辦法了。

咱們到底面臨的是什麼問題？

正如我已經提到的：

以前開發過的一些多頁面網站都是在Django template目錄下直接寫Django模板（相似於寫PHP和JSP），js和css又要寫在Django項目的static目錄下。

仔細想來，其實Django只是想要模板和靜態資源，咱們能夠直接在Django目錄下寫，固然也能夠開一個前端工程來寫，最後把模板和靜態資源copy到Django工程的相應目錄下。以下圖：

圖1

因此問題就是如何配置一個多頁面的前端項目，這個項目

• release的時候：
  可以輸出Django模板的html文件、純靜態頁面的html文件、css文件、js文件以及圖片文件。2種html文件inject了全部其所依賴的靜態文件，避免每次手動配置。

• dev的時候：
  js、css和html均可以使用預編譯器；可以支持livereload，實時看到代碼的結果

solution

看着這些需求，熟悉wepack的各位大神能夠已經微微一笑了。大部分的功能用webpack均可以輕鬆實現，不過是一個基於webpack的多頁面工程嘛。確實如此，把Django模板當作一種特別的html來看的話，其實就是如此。

惟一的不一樣點是開發時如何能讓node server渲染Django模板？
我想的辦法是在開發時用swig.js來代替Django渲染Django模板。（swig模板的語法和Django模板語法類似，加之它支持自定義tag和filter）

因此，最終的結構就是這樣：

圖2

項目的代碼結構：

圖3

• build目錄下是webpack、express以及swig的配置文件。

• config目錄下是項目的一些可變配置，好比release的路徑、是否生成sourcemap

• assets是一些全局資源，好比favicon

• common-style裏是一些全局的css文件

• components裏是頁面的公用組件
  組件的jade文件、scss文件和js文件是組織在一個目錄下的

• pages裏是頁面的實現，jade文件、scss文件和js文件是一樣是組織在一個目錄下的

• mock.js 是開發時express、swig用於渲染頁面的假數據。

圖4

圖5

page目錄下的jade文件分爲兩種：一種是dj.jade文件，一種是.jade文件。前者會被認爲是Django模板，開發時會被swig渲染，發佈時會被髮布到template目錄下。後者被認爲是純頁面，開發時不會被swig渲染，release時會被放到static的html目錄下。

另外，有時候一些頁面是一組頁面，他們很大一部分是同樣的，好比圖4中的about-us下面有2個頁面author和company。此時，能夠在about-us下面寫一個base，把公共的內容寫在base裏。而base會被識別，在dev和release時都不會被當作頁面處理。（不會生成一個base的頁面）

寫在最後

東西比較多，寫的也很亂，感受很難讓你們看明白。。。哈哈。看code吧。本項目是咱們team的一次嘗試，咱們用這個架構寫了2個項目，感受還不錯，不須要引入node層，先後端完全分離了，在咱們這樣的特定項目背景下，比較適用，和你們分享下，但願有用。