如何使用 Koa-static 在 html 文件中添加 React 组件？答案

【问题标题】：How add a React Component in html file with Koa-static?如何使用 Koa-static 在 html 文件中添加 React 组件？
【发布时间】：2021-04-20 16:37:18
【问题描述】：

我想在 koa 中创建一个可以呈现反应组件并提供 html 文件的应用程序。最准确地说，我想在简单的 HTML 中添加 React，但是当我使用我的应用程序时，我可以读取我的 html 文件，但不能读取我的 react 组件。

我有一个 Koa.js 服务器

require('isomorphic-fetch');
const Koa = require('koa');
const dotenv = require('dotenv');
const serve = require('koa-static');
const logger = require('koa-logger');
dotenv.config();
const server = new Koa();
const port = parseInt(process.env.PORT, 10) || 8000;
router = require(./router);
server.use(serve('./public'))
    .use(logger());
    .use(router.routes())
    .use(router.allowedMethods());
server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);

在我的公共文件夹中，我有一个 html 和 css 文件。例如：

<head>
      <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="/react-component/date-picker.js"></script>
</head>

<body>
  <p>You can look a React components :) :</p>
<div id = 'Date'></p>
 </body>

最后我有一个文件夹，其中包含所有 React 组件（ react-component ）和我的一个 React 组件：

import React from "react";
import ReactDOM from "react-dom";
import {AppProvider} from "@shopify/polaris";
import en from '@shopify/polaris/locales/en.json';

import "@shopify/polaris/dist/styles.css";
import {useCallback, useState} from 'react';
import {DatePicker} from '@shopify/polaris';

function DatePickerExample(props) {
  const [{month, year}, setDate] = useState({month: 1, year: 2018});
  const [selectedDates, setSelectedDates] = useState({
    start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    end: new Date('Mon Mar 12 2018 00:00:00 GMT-0500 (EST)'),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({month, year}),
    [],
  );

  return (
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      onMonthChange={handleMonthChange}
      selected={selectedDates}
      multiMonth
      allowRange
    />
  );
}

const domContainer = document.getElementById('date');
ReactDOM.render(e(DatePickerExample), domContainer);

我认为 koa-static 存在问题，因为使用 koa-logger，我明白了：

 <-- GET /react-component/date-picker.js
  --> GET /react-component/date-picker.js 404 0ms

但我不知道如何解决这个问题。谢谢大家:)

【问题讨论】：

标签： javascript html reactjs koa

【解决方案1】：

您将需要构建一个 webpack 配置来构建您的 bundle.js 文件并使用 HTMLPlugin 将包注入到 html 文件中。

    public: [
      new HtmlWebpackPlugin({
        inject: true,
        template: "path/to/template.html",
        filename: "index.html",
      }),
    ],

您会希望将这些文件构建到您的输出目录中，就像在您的 webpack 配置文件中一样。

  output: {
      filename: '[name].[hash].js',
      path: __dirname + 'path/to/dist/dir',
  },

您已经拥有从公共目录提供服务的包罗万象的路线，因此通过按照您想要的方式构建这些文件，您将实现这一目标。只需确保您的 Web 服务器正在为 dist 文件夹而不是 public 文件夹提供服务。

【讨论】：

对不起，我完全不明白你的意思。
您应该将您的 react 应用程序与 Webpack 捆绑在一起，以构建一个 bundle.js 文件。当您这样做时，您需要使用HtmlWebpackPlugin 来构建您的 index.html 文件的生产版本。这些文件应由您的 Web 服务器提供。您是否使用 create-react-app 构建您的 React 应用程序？
哦，谢谢！我不想使用creact-react-app，因为我想使用 React 可能是一个 js 脚本。如果我想使用creact-react-app，我们在blog.usejournal.com/serving-react-and-koa-together-720ba6668298 中有一个教程。最后我切换到引导程序。