使用create-react-app的多个入口点 [英] multiple entry points by using create-react-app

问题描述

我有一个页面，其中包含20％的React组件和80％的常规html内容。有必要在页面的不同位置放置几个反应组件，因此我在index.html中需要多个入口点。我想使用create-react-app，但我不想使用redux，因为页面很小。有什么方法可以相对容易地在index.html中创建2个入口点，以便页面上的所有React组件都可以访问单亲的道具？ ..还是可以将全局变量与事件侦听器一起使用，以进行更改，从而触发更新不同入口点中的react组件？ ..请告诉我此类任务的最佳实践，因为我不想从单个入口点使用jsx来开发整个页面。

I have a page with 20% of React components and 80% of normal html content. It is necessary to place several react components at different points of the page, and therefore I need several entry points in index.html. I want to use create-react-app, but I don’t want to use redux, since the page is rather small. Are there ways it’s relatively easy to make 2 entry points in index.html so that ALL react components on the page have access to the single parent's props? .. Or is it possible to use global variables with an event listener for their changes that would triger update the react components in different entry points? .. Please tell me the best practice for such tasks, because I don't want to develop a whole page by using jsx from a single entry point.

推荐答案

我知道这是一个延迟的答案，但是仅对于以后的搜索而言，步骤是：

I know it's a delayed answer, but just for future searches, the steps are:

1. 弹出（纱线弹出）


2. 编辑path.js并在appHtml条目下添加第二个入口点html文件

appAdminHtml: resolveApp('public/admin.html'),

1. 将 webpack.config.js 中的条目更新为

1. Update entry inside webpack.config.js to include one entry per entry point.

entry: {
  index: [
    isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ].filter(Boolean),
  admin: [
    isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appSrc + '/admin/index.js',
  ].filter(Boolean)
},

1. 将生成的输出JS文件更改为条目的名称（在 webpack.config.js内）

1. Change the generated output JS file to the name of the entry (inside webpack.config.js)

output: {
  path: isEnvProduction ? paths.appBuild : undefined,
  pathinfo: isEnvDevelopment,
  // This is the important entry
  filename: isEnvProduction
    ? 'static/js/[name].[contenthash:8].js'
    : isEnvDevelopment && 'static/js/[name].bundle.js',
  futureEmitAssets: true,
  chunkFilename: isEnvProduction
    ? 'static/js/[name].[contenthash:8].chunk.js'
    : isEnvDevelopment && 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: isEnvProduction
    ? info =>
        path
          .relative(paths.appSrc, info.absoluteResourcePath)
          .replace(/\\/g, '/')
    : isEnvDevelopment &&
      (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
  jsonpFunction: `webpackJsonp${appPackageJson.name}`,
  globalObject: 'this',
},

1. 使用插入的js脚本（也在 webpack.config.js 内）更新插件以生成第二个文件。

1. Update the plugins to generate the second file with the injected js script (also inside webpack.config.js).

// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
  Object.assign(
    {},
    {
      inject: true,
      chunks: ['index'],
      template: paths.appHtml,
      filename: 'index.html'
    },
    isEnvProduction
      ? {
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
          },
        }
      : undefined
  )
),
// Generates an `admin.html` file with the <script> injected.
new HtmlWebpackPlugin(
  Object.assign(
    {},
    {
      inject: true,
      chunks: ['admin'],
      template: paths.appAdminHtml,
      filename: 'admin.html',
    },
    isEnvProduction
      ? {
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
          },
        }
      : undefined
  )
),

1. 更新 ManifestPlugin配置包括新的入口点（也在 webpack.config.js`内部）：

1. Update the ManifestPlugin configuration to include the new entry point (also insidewebpack.config.js`):

new ManifestPlugin({
  fileName: 'asset-manifest.json',
  publicPath: publicPath,
  generate: (seed, files, entrypoints) => {
    const manifestFiles = files.reduce((manifest, file) => {
      manifest[file.name] = file.path;
      return manifest;
    }, seed);
    let entrypointFiles = [];
    for (let [entryFile, fileName] of Object.entries(entrypoints)) {
      let notMapFiles = fileName.filter(fileName => !fileName.endsWith('.map'));
      entrypointFiles = entrypointFiles.concat(notMapFiles);
    };
    return {
      files: manifestFiles,
      entrypoints: entrypointFiles,
    };
  },
}),

1. 更新服务器（开发人员和生产人员）以重写路径。
   
   
   
   
   • 对于开发服务器，您需要更新 webpackDevServer.config.js 。
   
   

1. Update your server (both dev and prod) to rewrite paths.
   • For the dev server, you need to update webpackDevServer.config.js.

historyApiFallback: {
  disableDotRule: true,
  verbose: true,
  rewrites: [
    { from: /^\/admin/, to: '/admin.html' },
  ]
},

由于Prod服务器的设置可能大不相同，

Since Prod server settings can be quite different, I'll let you figure it out.

这篇帖子详细介绍了所有内容。

This post describes everything in more detail.

这篇关于使用create-react-app的多个入口点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！