Babel.js DigitalOcean在Django中集成了React应用

r6l8ljro  于 2023-02-01  发布在  Babel
关注(0)|答案(2)|浏览(190)

我正在使用Django 4，希望在Django框架中集成一个ReactJS应用程序。
我选择使用确切的方法here启动，并按照概述完全相同地安装它。
以下是已安装组件和版本的列表：

├── @babel/core@7.20.12
├── @babel/preset-env@7.20.2
├── @babel/preset-react@7.18.6
├── babel-loader@9.1.2
├── clean-webpack-plugin@4.0.0
├── css-loader@6.7.3
├── react-dom@18.2.0
├── react@18.2.0
├── style-loader@3.3.1
├── webpack-bundle-tracker@0.4.3
├── webpack-cli@5.0.1
└── webpack@5.75.0

我不想在这里发布我所有的代码，因为它是100%相同的代码在上面的链接。
不幸的是，我在控制台中收到一个奇怪的错误：

GET http://127.0.0.1:8001/frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js net::ERR_ABORTED 404 (Not Found)

127.0.0.1/:1 Refused to execute script from 'http://127.0.0.1:8001/frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

这似乎与路径有关，但引用的JS文件名拼写正确，并且存在于确切的引用路径中。
服务器控制台也显示类似的错误：

Not Found: /frontend/static/frontend/frontend-dc3188e75be82e0a01e0.js
babeljs

2条答案

按热度按时间
nue99wik

nue99wik1#

你提供的链接是一个老教程。你应该始终遵循documentation.基于文档
在使用django-webpack-loader之前，您必须使用webpack-bundle-tracker生成前端包。您可以通过运行以下命令编译资产并生成包：

npx webpack --config webpack.config.js --watch

这是与webpack-bundle-tracker相关的webpack配置设置。它弹出webpack-stats.json文件，看起来像django webpack-loader从这个. json文件读取

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

module.exports = {
  context: __dirname,
  entry: './assets/js/index',
  output: {
    path: path.resolve('./assets/webpack_bundles/'),
    filename: "[name]-[hash].js"
  },
  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ],
}

然后：

WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': not DEBUG,
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    'POLL_INTERVAL': 0.1,
    'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
  }
赞(0）分享  回复(0）举报  2023-02-01
e37o9pze

e37o9pze2#

感谢您的反馈。这就是我最终如何使用在线教程、这里的反馈和github repo for django-webpack-loader的组合来完成这个集成的。
关于解决DigitalOcean Spaces路径问题的详细信息，请参见最底部的评论。
请记住，下面的方法消除了许多不必要的步骤，并确保使用最新版本的软件。参考资料如下。
如果您的环境中尚未安装React和React-Dom，请从此处开始：

npm install react react-dom
    • A：设置Django应用和依赖项**

1.在Django中创建前端应用

python manage.py startapp frontend

1.更新www.example.com或www.example.com中已安装应用程序的列表 settings.py or base.py:

INSTALLED_APPS = [
  'frontend',
  ...
]

1.为前端应用创建templates文件夹。在我的例子中，我的Templates目录在项目的根目录下，所以在文件夹下我添加了'frontend'：./模板/前端
1.在新创建的前端文件夹中创建模板：./templates/frontend/index.html
1.将以下代码添加到index.html中，其中包含稍后用于呈现包的Django标记：

<!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
</head>
<body>
  <div id="app"></div>
  <p>hello</p>
  {% render_bundle 'frontend' %}
</body>
</html>

1.在应用程序前端/www.example.com中创建视图 views.py

from django.shortcuts import render

def index(request):
  return render(request, 'frontend/index.html')

1.在项目级别更新www.example.com中的URL模式： urls.py at the project level: config/urls.py. In this case, the react app is loading from the root of the domain. I recommend using this configuration (outlined in step 7 and 8) or you will receive path errors. This can be changed later.

path('', include('frontend.urls'))

1.在应用程序级别更新www.example.com中的URL模式： urls.py at the app level:

path('', views.index)

1.此时，您可以测试并运行服务器或继续。如果您要测试，请记住您在步骤5中加载了2个Django标记，您需要将其注解掉。

python manage.py runserver

B：安装React & Babel
1.从项目的根目录运行以下命令来创建package.json文件。

npm init -y

1.设置巴别塔。

npm install --save-dev @babel/core

1.安装Babel插件：

npm install --save-dev @babel/preset-env @babel/preset-react

1.在项目的根目录下创建一个. babelrc文件，并将以下内容添加到其中：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

C：安装和配置Webpack
1.安装Webpack和其他软件包。

npm install --save-dev webpack webpack-cli webpack-bundle-tracker babel-loader css-loader style-loader clean-webpack-plugin

1.在项目的根目录下创建webpack.config.js文件。

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    context: __dirname,
    entry: {
        frontend: './frontend/src/index.js',

    },
    output: {
        path: path.resolve('./frontend/static/frontend/'),
        filename: '[name]-[hash].js',
        publicPath: 'static/frontend/',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new BundleTracker({ filename: './webpack-stats.json' })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
}

1.将以下脚本添加到位于项目根目录下的package.json文件中。此文件中应该已经有脚本;只需添加两行新代码"dev"和"build"。

{
  ...,
  "scripts": {
    ...,
    "dev": "webpack --config webpack.config.js --watch --mode development",
    "build": "webpack --config webpack.config.js --mode production"
  }
}

C：创建基本React APP进行测试
1.在frontend app文件夹中，创建一个名为src的文件夹。
1.在src文件夹中，创建一个App.js文件。确保大小写一致。并向其中添加以下内容：

import React from 'react'

const App = () => {
  return (
    <div>Hello, World!</div>
  )
}

export default App

1.在src文件夹中，创建一个index.js文件并向其中添加以下内容：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

D：安装Webpack加载程序并配置
1.运行以下命令：

pip install django-webpack-loader

1.更新www.example.com或www.example.com中已安装应用程序的列表 settings.py or base.py:

INSTALLED_APPS = (
  ...
  'webpack_loader',
  ...
)

1.此外，更新www.example.com或www.example.com文件中的Webpack加载程序配置： settings.py or base.py file:

WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': not DEBUG,
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    'POLL_INTERVAL': 0.1,
    'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
  }
}

如果您收到一个与DEBUG相关的错误，请检查django-webpack-loader说明中的可用选项（参见下面的链接）。
E：编译前端资产文件并测试
1.如果您在步骤A9中注解掉了django标记，请在继续之前删除注解。
1.运行以下命令：

npx webpack --config webpack.config.js --watch

1.运行服务器：

python manage.py runserver

1.打开浏览器并导航到站点的根目录。屏幕上应该会显示Hello World打印输出。如果没有，并且只显示空白的白色屏幕，则表示未加载react资源。请检查服务器控制台和/或浏览器控制台以查找错误。
参考：过时的教程https://dev.to/zachtylr21/how-to-serve-a-react-single-page-app-with-django-1a1l

赞(0）分享  回复(0）举报  2023-02-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com