Django項(xiàng)目前端工程化的探索

buildupchao 發(fā)布于2019-08-29 11:10 / 1396人閱讀

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

Django項(xiàng)目前端工程化的探索

不通過(guò)node層實(shí)現(xiàn)非SPA網(wǎng)頁(yè)開(kāi)發(fā)的前后端分離。

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

項(xiàng)目git: webpack-django-starter

需求

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

SEO很重要

頁(yè)面簡(jiǎn)單，基本是幾臺(tái)頁(yè)面，個(gè)別頁(yè)面有動(dòng)態(tài)內(nèi)容

后臺(tái)是Django

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

http://www.bsy365.com/

我們從前怎么做？

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

缺點(diǎn)：

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

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

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

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

優(yōu)點(diǎn)：

無(wú)腦，簡(jiǎn)單，人人都好上手

別人怎么做？

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

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

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

我們到底面臨的是什么問(wèn)題？

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

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

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

圖1

所以問(wèn)題就是如何配置一個(gè)多頁(yè)面的前端項(xiàng)目，這個(gè)項(xiàng)目

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

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

solution

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

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

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

圖2

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

圖3

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

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

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

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

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

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

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

圖4

圖5

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

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

寫(xiě)在最后

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