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

Question

I would like to create an app in koa that would render react components and serve html file.我想在 koa 中创建一个应用程序来呈现反应组件并提供 html 文件。 Most exactily, i want to add React in simple HTML but when i use my app i can read my html file but not my react component.最确切地说，我想在简单的 HTML 中添加 React，但是当我使用我的应用程序时，我可以读取我的 html 文件，但不能读取我的反应组件。

I have a Koa.js server我有一个 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}`);

In my public folder, i have a html and css file.在我的公共文件夹中，我有一个 html 和 css 文件。 For example:例如：

<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>

And finally I have a folder which all React components are present ( react-component ) and one of my React Component:最后，我有一个文件夹，其中包含所有 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);

I think a problem with koa-static because with koa-logger, i see:我认为 koa-static 存在问题，因为使用 koa-logger，我看到：

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

But I don't know how to fix this problem.但我不知道如何解决这个问题。 Thank you everyone:)谢谢大家：）

Answer 1

You will want to build a webpack config to build your bundle.js file and use the HTMLPlugin to inject the bundle into the html file.您将需要构建一个 webpack 配置来构建您的 bundle.js 文件并使用 HTMLPlugin 将包注入 html 文件。

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

You will want these files to be built to your output directory like so in your webpack config file.您将希望将这些文件构建到 output 目录中，就像在 webpack 配置文件中一样。

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

You already have the catch-all route to serve from the public directory, so by building these files out the way you want you will achieve this.您已经拥有从公共目录提供服务的包罗万象的路线，因此通过按照您想要的方式构建这些文件，您将实现这一目标。 Just make sure that your web server is serving the dist folder and not the public folder.只需确保您的 web 服务器服务于 dist 文件夹而不是 public 文件夹。

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

问题描述

1 个解决方案

解决方案1
0 2021-01-15 16:53:30

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

问题描述

1 个解决方案

解决方案1 0 2021-01-15 16:53:30

解决方案1
0 2021-01-15 16:53:30