Question

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

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

据我了解，配置完成后，我只需要运行Django服务器，它就会显示我的应用。我没有运行collectstatic或任何npm start或构建命令。

这是我配置的内容：

base.py

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

local.py

...
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;
  },
};

main.html

{ % 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>

urls.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服务react应用，并使用python manage.py runserver分别服务Django。不确定两个系统之间有什么相互依存关系，但是您应该能够根据端口号动态指定npm / django之间的路由。

对于生产而言，应通过专用的网络服务器（例如Nginx）来提供资产，并建立路由，以便Nginx充当路由到Django端点的反向代理（例如API）。

使用您当前的方法，下面的这一行试图让Django使用Django模板而不是响应模板来渲染html文件，因此您将获得错误的输出。

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

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

虽然可以通过django服务，但是分别提供react和django则更加直接。这种方式的好处是，您已经将前端（反应）与后端（django）分离了，并且如果您对其中一个进行了更改，则只需重启该服务（前端或后端）

Answer 2

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

有关更多信息，请参阅here。

django-webpack-loader无法使用react-app-rewired

2 个答案: