Question

我已经关注了很多关于如何使用Django Web服务器为Django设置Django和ReactJS来提供静态文件的例子。

我相信我有一个很好的工作版本，但出于某种原因，我得到一个空白页但没有错误。

我是ReactJS的新手，但我相信这是与Babel兼容的问题。似乎有新的Babel代码，我读过的教程已经过时了。有一点需要注意。当我运行这段代码时，我从文章中复制了这段代码 Create basic login forms using create react app module in reactjs，使用NPM start ...服务器可以正常工作。但是，Django没有处理它，但会加载它。

任何帮助都会非常感激，因为我没有想法。

这是我的代码：

SETTINGS.PY

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'webpack_loader',
'arlo_project'
]

STATIC_URL = '../../build/'

STATICFILES_DIRS = (
os.path.join(BASE_DIR, '/build/static'),
# We do this so that django's collectstatic copies or our bundles to the STATIC_ROOT or syncs them to whatever storage we use.
)

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

WEBPACK.CONFIG.JS

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

module.exports = {
context: __dirname,

entry: {
     main:'./src/index',
     vendors: ['react'],
},
// entry point of our app.
// src/index.js should require other js modules and dependencies it needs

output: {
    //Where you put the compiled bundle to be stored
    path: path.resolve('./build/bundles/'),
    filename: "[name]-[hash].js",
},

plugins: [
    //tells webpack where to store data about your bundles.
    new BundleTracker({path: ".", filename: '/webpack-stats.json'}),
],

module: {
    rules: [
        {
            //a regexp that tells webpack use the following loaders on all
            //.js and .jsx files
            test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader',
            query: {
                //presets: ['@babel/preset-env', '@babel/preset-react']
                 presets: ['@babel/env', '@babel/react'],
                 plugins: ["transform-class-properties"]
            }
        },
        //loader for font files (used by fontawesome, etc)
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
        },

        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.js?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              query: {
                presets: ['@babel/env', '@babel/react'],
                plugins: ["transform-class-properties"]
                //presets: ['@babel/preset-env', '@babel/preset-react']
            }
        }
    ],
},

resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx']
},
mode: 'development',

}

的package.json

{
 "name": "arlo_project",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "@babel/preset-react": "^7.0.0-beta.44",
 "axios": "^0.18.0",
 "babel-cli": "^6.26.0",
"material-ui": "^0.20.0",
"npm": "^5.8.0",
"react-dom": "^16.3.1",
"react-dropzone": "^4.2.9",
"react-scripts": "^1.1.4",
"react-tap-event-plugin": "^3.0.2",
"superagent": "^3.8.2"
},
"scripts": {
"start": "/usr/local/bin/react-scripts start",
"start:dev": "webpack-dev-server",
"build": "/usr/local/bin/react-scripts build",
"test": "/usr/local/bin/react-scripts test --env=jsdom",
"eject": "/usr/local/bin/react-scripts eject"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.44",
"@babel/preset-env": "^7.0.0-beta.44",
"babel-core": "^6.26.0",
"babel-loader": "^8.0.0-beta.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"create-react-app": "^1.5.2",
"css-loader": "^0.28.11",
"react": "^16.3.1",
"webpack": "^4.5.0",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}
}

的index.html

{% extends 'Base.html' %}
{% load staticfiles %}
{% load render_bundle from webpack_loader %}

{% block main %}
  <div id="root"></div>
     {% render_bundle 'vendors' %}
     {% render_bundle 'main' %}
{% endblock %}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

没有错误的空白Django ReactJS网页

0 个答案: