Django项目前端工程化的探索

不通过node层实现非SPA网页开发的前后端分离。

技术栈：webpack + jade + es6 + scss + swig等

项目git: webpack-django-starter

需求

成品beta版（虽然有广告之嫌）：

我们从前怎么做？

之前开发过的一些多页面网站都是在Django template目录下直接写Django模板（类似于写PHP和JSP），js和css又要写在Django项目的static目录下。前端没有工程化，前端代码被肢解分离在后端项目的目录里。做过这样项目的各位攻城狮应该都知道有多痛苦吧。

缺点：

优点：

别人怎么做？

好吧！别人的做法不合适，只能自己想办法了。

我们到底面临的是什么问题？

正如我已经提到的：

之前开发过的一些多页面网站都是在Django template目录下直接写Django模板（类似于写PHP和JSP），js和css又要写在Django项目的static目录下。

仔细想来，其实Django只是想要模板和静态资源，我们可以直接在Django目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源copy到Django工程的相应目录下。如下图：

图1

所以问题就是如何配置一个多页面的前端项目，这个项目

solution

看着这些需求，熟悉wepack的各位大神可以已经微微一笑了。大部分的功能用webpack都可以轻松实现，不过是一个基于webpack的多页面工程嘛。确实如此，把Django模板当做一种特别的html来看的话，其实就是如此。

唯一的不同点是开发时如何能让node server渲染Django模板？
我想的办法是在开发时用swig.js来代替Django渲染Django模板。（swig模板的语法和Django模板语法相似，加之它支持自定义tag和filter）

所以，最终的结构就是这样：

图2

项目的代码结构：

图3

图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层，前后端彻底分离了，在我们这样的特定项目背景下，比较适用，和大家分享下，希望有用。