django - 反应 django 渲染相同的内容

问题描述

我正在处理 Django-react 项目，并且在 Django 服务器上渲染 React 组件时遇到问题。准确地说，React 总是为我呈现相同的内容，即使我改变了它。我正在使用 Webpack、Babel-loader 并在 localhost 上运行它。

项目/模板/前端/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  <title>Django-React</title>
</head>
<body>

    <div id="app" class="columns"><!-- React --></div>
	{% load static %}
	<script  type='text/javascript' src="{% static "frontend/main.js" %}"></script>
</body>

</html>

入口点：

import ReactDOM from "react-dom";
import App from './components/App';

ReactDOM.render(<App/>, document.getElementById("app"));

package.json 中的脚本：

  "scripts": {
    "dev": "webpack --mode development ./frontend/src/index.js --watch ./frontend/static/frontend/main.js",
    "build": "webpack --mode production ./frontend/src/index.js --output ./frontend/static/frontend/main.js"
  }

通天塔配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

因此，当我在 App 组件中编写一些内容时（例如，使用“test”渲染 div）我可以在我的浏览器中看到它，但是当我想更改它时，在刷新页面后，从 div 标签获取相同的内容

标签： djangoreactjsrendering

解决方案

从你的问题中我可以理解，当你第一次渲染一个带有'test'的div时，它会渲染，但在那之后，进一步的变化不会更新。

这是因为 Django 上没有更新 javascript，您需要使用 collectstatic 来同步构建，这不是很有效。

要走的路是使用django-webpack-loader和webpack-bundle-tracker。

安装webpack-bundle-tracker

npm install --save-dev webpack-bundle-tracker

安装django-webpack-loader：

pip install django-webpack-loader

django-webpack-loader是一个 python 包，它为 webpack 动态生成的包注入链接和脚本标签。

webpack-bundle-tracker插件将有关 webpack 编译过程的必要信息发送到json文件，以便django-webpack-loader可以使用它。

为了让 webpack 跟踪您的应用程序中所做的更改，您需要创建一个服务器来监视您的 React 应用程序中的更改并捆绑您的 JS。

注意：我们使用节点服务器。

// Webpack Server

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.server.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true
}).listen(3000, '0.0.0.0', function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at 0.0.0.0:3000')
});

webpack.server.js使用的配置文件位于webpack.server.config.js

// webpack.server.config.js

const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    mode: 'development',

    entry: {
        main: './frontend/src/index.js',
        devServer: 'webpack-dev-server/client?http://localhost:3000'
    },

    output: {
        filename: "[name].js",
        path: path.resolve('./frontend/static/frontend/bundles/'),
        publicPath: 'http://localhost:3000/frontend/static/frontend/bundles/', // django-webpack-loader overrides django's STATIC_URL with this path
    },

    plugins: [
        new BundleTracker({filename: './frontend/webpack-stats.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
    ],

    devServer: {
        contentBase: './frontend/static/frontend/bundles/',
    },
};

请注意，默认情况下，服务器会将捆绑包保存在内存中，而不是写入磁盘

当服务器停止时，将没有捆绑文件的迹象，因为它们没有编译到内存中。

要在开发中将文件构建到内存中，请在webpack.dev.config.js中创建另一个配置文件

// webpack.dev.config.js

const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    mode: 'development',

    entry: {
        main: './frontend/src/index.js',
    },

    output: {
        filename: "[name].js",
        path: path.resolve('./frontend/static/frontend/bundles/'),
    },

    plugins: [
        new BundleTracker({filename: './frontend/webpack-stats.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
    ],

};

在为生产构建文件时，在webpack.prod.config.js创建另一个配置文件

// webpack.prod.config.js

const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    mode: 'production',

    entry: {
        main: './frontend/src/index.js',
    },

    output: {
        filename: "[name].js",
        path: path.resolve('./frontend/static/frontend/dist/'),
    },

    plugins: [
        new BundleTracker({filename: './frontend/webpack-stats-prod.json'}), // Pass the correct path to the WEBPACK_LOADER in django settings
    ],

};

在你的Django 设置中；

import sys
import os

# Assuming this is your base directory
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Also assuming this is your base directory
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'), 

# In development
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), # Path to 'webpack-stats.json'
    }
}

# In production
if not DEBUG:
    WEBPACK_LOADER['DEFAULT'].update({
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json') # Path to 'webpack-stats-prod.json'
    })

INSTALLED_APPS = (
 ...
 'webpack_loader',
)

你的index.html现在应该是这样的；

{% load render_bundle from webpack_loader %}  <<< Add this.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  <title>Django-React</title>
</head>
<body>

    <div id="app" class="columns">
        <!-- React -->
    </div>

    {% render_bundle 'main' %}  <<< Add this.

</body>

</html>

现在，您的 package.json 应该如下所示；

"scripts": {
    "dev": "node ./webpack.server.js",
    "build-dev": "webpack --mode development --config ./webpack.dev.config.js",
    "build-prod": "webpack --mode production --config ./webpack.prod.config.js"
  }

因此，要使用自动捆绑进行开发，只需运行：

npm 运行开发

要在 webpack 服务器停止后将文件构建到内存中，只需运行：

npm 运行构建开发

最后，要使用生产优化进行构建，只需运行：

npm 运行构建产品

我尝试对你的项目进行修改，感觉要根据你的项目结构进行调整。检查以下参考以更好地指导您。他们帮了我！

参考：

django - 反应 django 渲染相同的内容

问题描述

解决方案

推荐阅读