Javascript 在Django服务器上使用webpack运行React应用程序时出现问题
我正在使用Django作为后端构建一个web应用程序,并希望实现一个ReactJS框架前端。到目前为止,我拥有的每个应用程序都可以独立地正常运行。我还实现了webpack,它似乎配置正确,因为它将在本地主机上运行我的ReactJS应用程序。作为webpack(以及一般的web开发)的新手,我不确定如何在Django本地服务器(127.0.0.1:8000)上运行React。我从许多论坛上了解到,javascript文件需要打包,然后读入django应用程序。以下是相关文件: package.jsonJavascript 在Django服务器上使用webpack运行React应用程序时出现问题,javascript,django,reactjs,webpack,django-middleware,Javascript,Django,Reactjs,Webpack,Django Middleware,我正在使用Django作为后端构建一个web应用程序,并希望实现一个ReactJS框架前端。到目前为止,我拥有的每个应用程序都可以独立地正常运行。我还实现了webpack,它似乎配置正确,因为它将在本地主机上运行我的ReactJS应用程序。作为webpack(以及一般的web开发)的新手,我不确定如何在Django本地服务器(127.0.0.1:8000)上运行React。我从许多论坛上了解到,javascript文件需要打包,然后读入django应用程序。以下是相关文件: package.js
{
"name": "package.json",
"version": "1.0.0",
"description": "This is the private repository for the USA Baseball analytics team.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "SET NODE_ENV=development babel src -d lib",
"build-prod": "SET NODE_ENV=development babel src -d lib",
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/USAB-Analytics/BaldEagle.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/USAB-Analytics/BaldEagle/issues"
},
"homepage": "https://github.com/USAB-Analytics/BaldEagle#readme",
"dependencies": {
"react": "^16.2.0",
"express": "^4.16.3",
"react-dom": "^16.4.1",
"react-sortable-hoc": "^0.8.3",
"yarn": "^1.7.0",
"react-prop-types": "^0.4.0",
"semantic-ui-react": "^0.77.1",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-1": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "3.0.4",
"style-loader": "^0.19.1",
"css-loader": "^0.28.10",
"jsx-loader": "^0.13.2",
"react": "^16.4.0",
"webpack": "^4.10.2",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^3.0.4",
"webpack-command": "^0.2.1",
"webpack-dev-server": "^3.1.4"
},
"keywords": []
}
webpack.config.js
var path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//var BundleTracker = require('webpack-bundle-tracker')
const port = process.env.PORT || 3000;
process.env.NODE_ENV = 'production';
module.exports = {
mode: 'development',
entry: './frontend/src/index.js',
output: {
filename: 'bundle.[hash].js'
},
devtool: 'inline-source-map',
module: {
rules: [
// First Rule
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
// Second Rule
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
camelCase: true,
sourceMap: true
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: './webapp/templates/webapp/home.html',
})
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
};
import React from 'react';
import ReactDOM from 'react-dom';
import './css/main.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import {HomePage} from './components/HomePage.js'
import {Bios} from './components/Bios.js'
import {Bio} from './components/Bio.js'
import {NavBar} from './components/NavBar.js'
import {TeamsList} from './components/TeamsList.js'
import {TOSBios} from './components/TOSBios.js'
import {NT18Bios} from './components/NT18Bios.js'
import {CNTBios} from './components/CNTBios.js'
import {NT15Bios} from './components/NT15Bios.js'
class App extends React.Component {
render(){
var styles = {
'marginLeft': '210px'
}
return (
<Router>
<div className="col-sm-10">
<NavBar />
<div style={styles}>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/bios/:id" component={Bio} />
<Route path="/bios/" component={Bios} />
<Route path="/teams/tos/:id" component={Bio} />
<Route path="/teams/cnt/:id" component={Bio} />
<Route path="/teams/nt18/:id" component={Bio} />
<Route path="/teams/nt15/:id" component={Bio} />
<Route path="/teams/cnt/" component={CNTBios} />
<Route path="/teams/nt18/" component={NT18Bios} />
<Route path="/teams/nt15/" component={NT15Bios} />
<Route path="/teams/tos/" component={TOSBios} />
<Route path="/teams/" component={TeamsList} />
</Switch>
</div>
</div>
</Router>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
frontend/src/index.js
var path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//var BundleTracker = require('webpack-bundle-tracker')
const port = process.env.PORT || 3000;
process.env.NODE_ENV = 'production';
module.exports = {
mode: 'development',
entry: './frontend/src/index.js',
output: {
filename: 'bundle.[hash].js'
},
devtool: 'inline-source-map',
module: {
rules: [
// First Rule
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
// Second Rule
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
camelCase: true,
sourceMap: true
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: './webapp/templates/webapp/home.html',
})
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
};
import React from 'react';
import ReactDOM from 'react-dom';
import './css/main.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import {HomePage} from './components/HomePage.js'
import {Bios} from './components/Bios.js'
import {Bio} from './components/Bio.js'
import {NavBar} from './components/NavBar.js'
import {TeamsList} from './components/TeamsList.js'
import {TOSBios} from './components/TOSBios.js'
import {NT18Bios} from './components/NT18Bios.js'
import {CNTBios} from './components/CNTBios.js'
import {NT15Bios} from './components/NT15Bios.js'
class App extends React.Component {
render(){
var styles = {
'marginLeft': '210px'
}
return (
<Router>
<div className="col-sm-10">
<NavBar />
<div style={styles}>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/bios/:id" component={Bio} />
<Route path="/bios/" component={Bios} />
<Route path="/teams/tos/:id" component={Bio} />
<Route path="/teams/cnt/:id" component={Bio} />
<Route path="/teams/nt18/:id" component={Bio} />
<Route path="/teams/nt15/:id" component={Bio} />
<Route path="/teams/cnt/" component={CNTBios} />
<Route path="/teams/nt18/" component={NT18Bios} />
<Route path="/teams/nt15/" component={NT15Bios} />
<Route path="/teams/tos/" component={TOSBios} />
<Route path="/teams/" component={TeamsList} />
</Switch>
</div>
</div>
</Router>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
从“React”导入React;
从“react dom”导入react dom;
导入“/css/main.css”;
从“react Router dom”导入{BrowserRouter as Router,Switch,Route,Link};
从“./components/HomePage.js”导入{HomePage}
从“./components/Bios.js”导入{Bios}
从“./components/Bio.js”导入{Bio}
从“./components/NavBar.js”导入{NavBar}
从“./components/TeamsList.js”导入{TeamsList}
从“./components/TOSBios.js”导入{TOSBios}
从“./components/NT18Bios.js”导入{NT18Bios}
从“./components/CNTBios.js”导入{CNTBios}
从“./components/NT15Bios.js”导入{NT15Bios}
类应用程序扩展了React.Component{
render(){
变量样式={
“marginLeft”:“210px”
}
返回(
);
}
}
ReactDOM.render(
,
document.getElementById('root'))
);
webapp/templates/webapp/home.html
<!-- {% extends "webapp/header.html" %} -->
{% load render_bundle from webpack_loader %}
<html>
<head>
<meta charset="UTF-8">
<title>React with Django</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
{%load render_bundle from webpack_loader%}
与Django反应
这些不应在同一台服务器上运行。如果您希望连接它们,您应该能够创建配置文件,并说如果我点击的url是xx.com/users,否则如果是开发,则是localhost:8000/users。为什么您需要两者都在同一台服务器上运行?我们使用django模板呈现我们的网页包包包(对于Vue应用程序,但这是相同的基本思想)。您已将网页包配置为开发模式。这意味着您要运行webpack开发服务器。但您需要将前端应用程序构建成一个捆绑包,然后将此捆绑包用于服务器端。只需删除devServer
部分。此外,您还可以删除这个process.env.NODE_env='production'编码>并将模式更改为生产模式
。此操作将您的process.env.NODE_env
设置为production
()
如果您需要在开发模式下测试您的应用程序,您可以将代理添加到package.json中,并使用后端地址,前后分开运行
解决方案:
添加一个npm命令:
“build:prod”:“&&mv/index.html//templates&&mv/*/static”
将此添加到Django应用程序设置:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
我们需要能够通过django模板运行它,因为我们的应用程序托管在python托管站点上。为了让它工作,前端应用程序应该通过webpack进行捆绑,然后由django应用程序提供服务。您建议我们如何处理此问题?我按照您所说的步骤进行了编译,但没有任何更改。编译后,您需要将编译后的文件添加到Django app index.htmlw我们认为目前正在这样做,但显然我们没有。你建议怎么做?没什么难的。只需制作捆绑包,将其移动到Django中的/static/文件夹中,并将这样的链接添加到您的主模板
@Spencer我已经为我的回答添加了另一个可能的解决方案您是否使用了webpack\u loader中的render\u捆绑包功能?您已导入webpack\u loader,但未使用render\u bundle加载react!