如何使用 Django、Angular2 和 Webpack 对代码进行版本控制？答案

【问题标题】：How do I version code with Django, Angular2, and Webpack?如何使用 Django、Angular2 和 Webpack 对代码进行版本控制？
【发布时间】：2016-08-02 11:17:32
【问题描述】：

我正在使用 Django + Angular 2 + Webpack，在 Django 中我创建了 URL 来呈现我的应用程序 (http://example.com/user/beta)，所以首先我的 index.html 被渲染 & index 包含我的 angular 2 东西，因为我使用的是 webpack一切都捆绑在 main、vendor 和 polyfill 中，我的结构是这样的：

app
 |
 |__angular
 |     |
 |     |
 |     |___src
 |     |___typings
 |     |___package.json, tsconfig.json, webpack.config.js
 |
 |
 |__static
 |     |__css
 |     |__dist <this contains bundle files which got complied by webpack>
 |
 |
 |__templates
 |     |
 |     |___index.html
 |     |___app
            |__<all template files>

这里所有静态文件都存储到 CDN 并且似乎 js 文件正在被缓存，所以新的更改没有反映，以避免我必须手动对我的 js 文件进行版本控制，如 main.bundle.v.01.js，我想更改捆绑文件版本每次我想将它部署到测试/生产，所以这个手动工作消失了，为此我必须在 webpack.config 中做一些更改以进行版本控制并将它们放在 index.html 中，但由于 index.html 无法控制webpack 无法完成，所以我需要找到一种方法让 webpack 解析 Angular 应用程序代码，同时对这些捆绑文件进行版本控制并在 index.html 中替换它

【问题讨论】：

标签： javascript angularjs django angular webpack

【解决方案1】：

我使用的解决方案可以在以下模板中找到

https://github.com/dkarchmer/django-aws-template

不幸的是，它基于 Gulp（不是 Webpack），但您应该能够轻松地从 Webpack 模拟相同的流程（或切换到 Gulp）。

基本上，我的 webapp 的 gulp 流程的最后一步是使用常规印象来修改 Gulp 生成的顶级 index.html，并将其移动到模板目录：

gulp.task('templates', ['build'], () => {
  // Black Magic to convert all static references to use django's 'static' templatetags
  return gulp.src(config.dist + '/*.html')
        .pipe(replace(/href="app([/]\S*)"/g, 'href="{% static \'dist/webapp/app$1\' %}"'))
        .pipe(replace(/src="app([/]\S*)"/g, 'src="{% static \'dist/webapp/app$1\' %}"'))
        .pipe(gulp.dest(config.templates));
});

在哪里config.templates = '../server/templates/dist/webapp'。显然，你还需要.gitignore这个目录。你最终得到了

如您所见，我基本上将任何href=app/foo/bar 替换为href={% static 'dist/webapp/app/foo/bar' %}

我这样做是因为我仍然希望能够在本地计算机上进行开发以及静态来自生产中的 CDN 时更改 {% static %} 模板标签。

您会在上面的 django 模板上注意到的另一件事是基本模板 server/templates/base.html 扩展自

{% extends "dist/webapp/index.html" %}

dist/webapp/index.html 是我的 Gulp 流复制修改后的index.html 的位置。图像源文件也是如此。或者在您的流程中，也许您可以将{% static %} 保留在源文件中，并让 webpack 处理它们。

|__templates
|     |
|     |__dist
|     |     |
|     |     |__ webapp/index.html
|     |
|     |___base.html

在我的例子中，Gulp 流程严格处理样式表和脚本，所以其余的由 base.html 使用常规 Django 技术完成。

在另一个我使用 Angular 但仍想使用 Django 来呈现和处理登录名和权限的项目中，我添加了一个基本上可以做到的单一视图

class AngularView(TemplateView):
    template_name = 'dist/webapp/index.html'

    @method_decorator(login_required)
    def dispatch(self, request, *args, **kwargs):
        return super(AngularView, self).dispatch(request, *args, **kwargs)

其中'dist/webapp/index.html' 也是由 Gulp 流构建和复制的修改文件（不受版本控制）。

显然，缺点（至少对某些人来说）是您现在有一个两步过程：1）构建静态，2）Django。但对我来说，这相当于python manage.py collectstatic 的工作方式。

【讨论】：