Django項目前端工程化的探索

Jackwoo 發(fā)布于2019-08-01 15:38 / 481人閱讀

摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細(xì)想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。

Django項目前端工程化的探索

不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。

技術(shù)棧：webpack + jade + es6 + scss + swig等

項目git: webpack-django-starter

需求

項目需求公司官網(wǎng)。

SEO很重要

頁面簡單，基本是幾臺頁面，個別頁面有動態(tài)內(nèi)容

后臺是Django

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

http://www.bsy365.com/

我們從前怎么做？

之前開發(fā)過的一些多頁面網(wǎng)站都是在Django template目錄下直接寫Django模板（類似于寫PHP和JSP），js和css又要寫在Django項目的static目錄下。前端沒有工程化，前端代碼被肢解分離在后端項目的目錄里。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。

缺點：

想測試？你需要一套后臺環(huán)境

想livereload？要多帶帶起個livereload進程監(jiān)控前端代碼的目錄，還要在頁面里特別的嵌入一段代碼。livereload

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

想用jade？想用ES6？想用scss？想用npm管理依賴？應(yīng)該都能做到，但是貌似都不太方便。

優(yōu)點：

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

別人怎么做？

SPA
Angular、Vue、React，用這些框架做個SPA，頁面不需要后臺渲染了，這樣前端可以完全從后端脫離出來，前后端的交互只通過ajax來拿數(shù)據(jù)。這幾個框架相比大家都很熟悉，優(yōu)點我就不用我說了，stater的項目在git上也到處都是。其中我個人最喜歡Vue，但是搜索引擎，尤其是我們大天朝的baidu爸爸對js支持的并不好，所以單純的SPA方式就不太適合我們的需求了。

后端渲染的SPA和帶node層的大前端
react和vue2.0的后臺渲染，淘寶的中途島這些解決方案都是很精妙的，不得不佩服相處這些方案的人的睿智。然而我們的項目其實是比較簡單的，同事們都覺得沒有必要加個node層搞那么復(fù)雜。（也許并不復(fù)雜，只是我們沒有實踐過）

好吧！別人的做法不合適，只能自己想辦法了。

我們到底面臨的是什么問題？

正如我已經(jīng)提到的：

之前開發(fā)過的一些多頁面網(wǎng)站都是在Django template目錄下直接寫Django模板（類似于寫PHP和JSP），js和css又要寫在Django項目的static目錄下。

仔細(xì)想來，其實Django只是想要模板和靜態(tài)資源，我們可以直接在Django目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源copy到Django工程的相應(yīng)目錄下。如下圖：

圖1

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

release的時候：
能夠輸出Django模板的html文件、純靜態(tài)頁面的html文件、css文件、js文件以及圖片文件。2種html文件inject了所有其所依賴的靜態(tài)文件，避免每次手動配置。

dev的時候：
js、css和html都可以使用預(yù)編譯器；能夠支持livereload，實時看到代碼的結(jié)果

solution

看著這些需求，熟悉wepack的各位大神可以已經(jīng)微微一笑了。大部分的功能用webpack都可以輕松實現(xiàn)，不過是一個基于webpack的多頁面工程嘛。確實如此，把Django模板當(dāng)做一種特別的html來看的話，其實就是如此。

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

所以，最終的結(jié)構(gòu)就是這樣：

圖2

項目的代碼結(jié)構(gòu)：

圖3

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

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

assets是一些全局資源，比如favicon

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

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

pages里是頁面的實現(xiàn)，jade文件、scss文件和js文件是同樣是組織在一個目錄下的

mock.js 是開發(fā)時express、swig用于渲染頁面的假數(shù)據(jù)。

圖4

圖5

page目錄下的jade文件分為兩種：一種是dj.jade文件，一種是.jade文件。前者會被認(rèn)為是Django模板，開發(fā)時會被swig渲染，發(fā)布時會被發(fā)布到template目錄下。后者被認(rèn)為是純頁面，開發(fā)時不會被swig渲染，release時會被放到static的html目錄下。

另外，有時候一些頁面是一組頁面，他們很大一部分是一樣的，比如圖4中的about-us下面有2個頁面author和company。此時，可以在about-us下面寫一個base，把公共的內(nèi)容寫在base里。而base會被識別，在dev和release時都不會被當(dāng)做頁面處理。（不會生成一個base的頁面）

寫在最后

東西比較多，寫的也很亂，感覺很難讓大家看明白。。。哈哈。看code吧。本項目是我們team的一次嘗試，我們用這個架構(gòu)寫了2個項目，感覺還不錯，不需要引入node層，前后端徹底分離了，在我們這樣的特定項目背景下，比較適用，和大家分享下，希望有用。