django-webpack-loader 不使用 react-app-rewired 渲染反应应用程序

Question

我正在努力将我的 react(16.6.3) 和 Django(2.0) 应用程序结合在一起。 现在我正在努力让开发服务器正常工作，稍后将专注于生产。 我一直在遵循有关此过程的一些指南，但它们都有些不同（而且大多数似乎已经过时），而且我一直无法找到正确的组合来使其正常工作。 我的最终目标是我希望能够从 1 个终端窗口运行开发服务器。

我正在使用 react-app-rewired 因为我不想弹出。 我的理解是不弹出而不是必须手动配置所有 Webpack 配置更可取。 这对我来说尤其如此，因为我仍在学习 react/webpack。

我的理解是，一旦配置完成，我只需要运行 Django 服务器，它就会显示我的应用程序。 我没有运行collectstatic或任何npm start或 build 命令。

这是我配置的内容：

基础文件

...    
STATICFILES_DIRS = [
        # os.path.join(os.path.join(BASE_DIR, 'frontend'), 'build', 'static')
        os.path.join(BASE_DIR, "frontend", "build", "static"),
    ]
...

本地文件

...
WEBPACK_LOADER = {
    "DEFAULT": {
        "CACHE": not DEBUG,
        "BUNDLE_DIR_NAME": "frontend/build/static/",  # must end with slash
        "STATS_FILE": os.path.join(BASE_DIR, "frontend", "build", "webpack-stats.json"),
    }
}
...

config-overrides.js

var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  webpack: (config, env) => {

    config.plugins.push(
      new BundleTracker({
        path: __dirname,
        filename: './build/webpack-stats.json'
      }),
    );

    return config;
  },
};

主文件

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React CRUD</title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

网址.py

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', include('api.urls')),
    path(r'', TemplateView.as_view(template_name="main.html"))
]

使用此配置并运行 Django 服务器，当我导航到 localhost:8000 时，我看到的只是一个基本页面：

项目结构：

.
├── api
│   ├── __init__.py
│   ├── __pycache__
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   ├── models.py
│   ├── serializers.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── financeApp
│   ├── __init__.py
│   ├── __pycache__
│   └── templates
├── build
│   └── webpack-stats.json
├── config
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings
│   ├── urls.py
│   └── wsgi.py
├── database20181022.json
├── db.sqlite3
├── docker-compose-dev.yml
├── docker-compose.yml
├── docker_compose
│   ├── django
│   ├── nginx
│   ├── node
│   └── postgres
├── frontend
│   ├── README.md
│   ├── build
│   ├── config-overrides.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── package0.json
│   ├── public
│   └── src
├── manage.py
├── requirements
│   ├── base.txt
│   ├── local.txt
│   └── production.txt
├── static
│   ├── builds
│   ├── builds-development
│   └── js
├── templates
    └── main.html

Answer 1

Django 不知道该提供什么服务。 您需要构建应用程序，然后使用 django 作为静态构建应用程序。

或者，在开发时，使用npm start run和 Django 分别使用python manage.py runserver为 react 应用程序提供服务。 不确定你在两个系统之间有什么相互依赖，但你应该能够根据端口号动态指定 npm/django 之间的路由。

对于生产，资产的服务应该使用专用的网络服务器（例如 Nginx）完成并建立路由，以便 Nginx 充当路由到 Django 端点（例如 API）的反向代理。

使用您当前的方法，下面的这一行试图让 Django 使用 Django 模板来呈现 html 文件，而不是反应模板，因此您会得到错误的输出。

TemplateView.as_view(template_name="main.html")

您必须构建源代码以便通过 react 解析这些模板，或者通过 npm 提供 react 代码。

虽然可以通过 django 提供服务，但是将 react 和 django 分开提供服务要简单得多。 这种方式的一个好处是您已经将前端（react）与后端（django）分离，如果您对其中任何一个进行更改，您只需要重新启动该服务（前端或后端）

Answer 2

实际上这是一个与语法相关的问题，Django 标签语法看起来像{% tag %}而不是{ % tag % } （大括号和百分号之间没有空格）。

更多信息请参考Django 模板语言。

django-webpack-loader 不使用 react-app-rewired 渲染反应应用程序

问题描述

2 个解决方案

解决方案1
1 2019-01-17 19:21:11

解决方案2
0 2019-06-06 14:33:08

django-webpack-loader 不使用 react-app-rewired 渲染反应应用程序

问题描述

2 个解决方案

解决方案1 1 2019-01-17 19:21:11

解决方案2 0 2019-06-06 14:33:08

解决方案1
1 2019-01-17 19:21:11

解决方案2
0 2019-06-06 14:33:08