Django项目前端工程探索不使用节点层实现非SPA网页开发的前后端分离。技术栈：webpack+jade+es6+scss+swig等项目git:webpack-django-starter需要项目需要公司官网。SEO很重要页面简单，基本就那么几个页面，部分页面有动态内容后台是Django成品测试版（虽然有广告嫌疑）：http://www.bsy365.com/怎么样我们以前做过吗？之前开发的一些多页面网站，都是直接在Django模板目录下写Django模板（类似于写PHP和JSP），js和css写在Django项目的static目录下。前端没有工程化，前端代码被肢解分离在后端工程的目录中。做过这样项目的应该都知道有多痛苦。缺点：想测试？需要像livereload这样的后台环境吗？单独设置livereload进程监控前端代码目录，必须在页面中嵌入特殊代码。Livereload要压缩js和css？使用Django压缩器。想用玉？想使用ES6？想使用scss吗？想用npm管理依赖关系？应该可以，但是好像不方便。优点：无脑、简单、容易让大家学会别人怎么做？SPAAngular、Vue、React，使用这些框架构建一个SPA，页面不需要在后台渲染，让前端和后端完全分离，前后端之间只进行交互使用ajax获取数据。与这些框架相比，大家再熟悉不过了。我不需要谈论他们的优势。Stater项目在git上无处不在。其中我个人最喜欢Vue，但是搜索引擎，尤其是我们大天朝的百度爸爸，对js的支持不是很好，所以单纯的SPA方式并不适合我们的需求。SPA加后端渲染，大前端react加node层，vue2.0的后台渲染，淘宝的中途岛，这些方案都很精妙，不得不佩服和这些方案相处的人的智慧。不过我们的项目其实还是比较简单的，同事觉得没必要加一个节点层搞得这么复杂。（也许并不复杂，只是我们没有实践过）好吧！别人的做法不合适，自己要想办法。我们面临什么问题？前面已经讲过：之前开发的一些多页面网站，都是直接在Django模板目录下写Django模板（类似于写PHP和JSP），而js和css写在Django项目的static目录下。仔细想想，其实Django要的只是模板和静态资源。我们可以直接在Django目录下写，当然我们也可以打开一个前端项目来写，最后把模板和静态资源复制到Django项目对应的目录下。如下图所示：图1那么问题来了，如何配置一个多页面的前端项目。本项目发布时：可以输出Django模板的html文件、纯静态页面的html文件、css文件、js文件和图片文件。两个html文件注入所有依赖的静态文件，避免了每次都手动配置。dev时：js、css、html都可以使用预编译器；它可以支持livereload，实时查看代码结果。解决方案看着这些需求，熟悉wepack的小伙伴们已经可以微微一笑了。大部分功能都可以用webpack轻松实现，但它是一个基于webpack的多页面项目。确实，如果你把Django模板看成是一种特殊的html，其实就是这样。唯一的区别是如何让节点服务器在开发过程中渲染Django模板？我认为的方式是在开发过程中使用swig.js而不是Django来渲染Django模板。（swig模板语法与Django模板类似，支持自定义标签和过滤器。）因此，最终结构如下：图2项目代码结构：图3webpack配置文件,express和swig在构建目录中。config目录下是项目的一些变量配置，比如release的路径，是否生成sourcemapssets是一些全局资源，比如faviconcommon-style，components里面有一些全局的css文件，components里面是jade文件，scss文件和js文件组织在一个目录的页面中，是页面的实现。jade文件、scss文件和js文件也都组织在同一个目录下，mock.js是开发时express和swig用来渲染页面的假数据。图4和图5的page目录下有两种jade文件：一种是dj.jade文件，一种是.jade文件。前者会被认为是一个Django模板，在开发时会被swig渲染，发布时会发布到模板目录下。后者被认为是纯页面，开发时不会被swig渲染，发布时会放在statichtml目录下。另外，有时候有些页面是一组页面，大部分都是一样的。比如图4中about-us下有author和company两个页面，此时可以在about-us下写一个base，在base里面写public的内容。base将被识别，并且不会被视为开发和发布中的页面。（不会生成基页）最后写了很多东西，写的也很乱。感觉大家很难理解。..哈哈。看看代码。这个项目是我们团队的一次尝试。我们用这个架构写了两个项目，感觉不错。无需引入节点层，前后端完全分离。在我们这种具体项目的场景下，比较适用，接下来分享给大家，希望有用。
