Question

首先让我说我是这两个框架的初学者。我正在开始一个大量使用python的机器学习课程-因此，我认为拥有Python客户端的React服务器很好地记录了我的课程。

最初：

已安装python和cherrypy
安装了create-react-app并创建了示例应用程序
试图遵循cherrypy文档
内置react app，并尝试将其嵌入到小巧的index.html

现在，cherrypy文档未说明如何为小型react应用提供服务。但是，我尝试使用他们的示例并将react app嵌入到“ index.html”中。

当我运行开发react-app时-看起来正确-徽标旋转且样式正确

当我从cherrypy运行时，它不是很多-该应用程序是完全静态的-没有旋转或任何东西

这是我的server.py：

import os
import os.path
import random
import string

import cherrypy

class Test:

    @cherrypy.expose
    def index(self):
        return """<!DOCTYPE html>
          <html>
            <head>
              <link href="/static/css/style.css" rel="stylesheet">
              <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
              <script> 
                $(function(){
                $("#root").load("static/js/index.html"); 
              });
              </script> 
            </head>
            <body>
              <div id="root"></div>
            </body>
          </html>"""

if __name__ == '__main__':
    conf = {
        '/': {
            'tools.sessions.on': True,
            'tools.staticdir.root': os.path.abspath(os.getcwd())
        },
        '/static': {
            'tools.staticdir.on': True,
            'tools.staticdir.dir': './public'
        }
    }
    cherrypy.quickstart(Test(), '/', conf)

我相信我的问题是我正在使用jQuery从缩小的react应用加载'index.html'。也许，该应用程序正在运行，但找不到CSS捆绑包。我在控制台中没有错误。

是否有适当的方法来做到这一点？非常感谢

修改

我尝试使用here中的HtmlWebpackPlugin-经过大量搜索后，我得到了Webpack来捆绑一个js文件。但是，控制台中仍然出现错误。

webpack.config.js：

const path = require('path');
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader']
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: true,
      minify: {
        html5: true,
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributese: true,
        useShortDoctype: true
      }
    }),
    new WebpackMd5Hash()
  ]
};

package.json添加了以下行：

"build:bundle": "webpack --config webpack.config.js --mode production",

.babelrc：

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

错误：

main.f678c92d1daeff816ce7.js:1 Uncaught ReferenceError: require is not defined
    at Object.<anonymous> (main.f678c92d1daeff816ce7.js:1)
    at n (main.f678c92d1daeff816ce7.js:1)
    at Module.<anonymous> (main.f678c92d1daeff816ce7.js:1)
    at n (main.f678c92d1daeff816ce7.js:1)
    at main.f678c92d1daeff816ce7.js:1
    at main.f678c92d1daeff816ce7.js:1

此外，我添加了require.js作为脚本，但这也很麻烦。

如何与Cherrypy一起使用缩小的React？

0 个答案: