web-dev-qa-db-ja.com

作成React App V2-複数のエントリポイント

Reactアプリを2つのエントリポイントで作成します。1つはアプリ用、もう1つは管理パネル用です。

私はCreate React App V2から始め、このgitHub問題スレッド https://github.com/facebook/create-react-app/issues/1084 をフォローしていますこのチュートリアル http://imshuai.com/create-react-app-multiple-entry-points/ 。

CRA V1から複数のエントリポイントを追加するための手順をV2で機能するように移植しようとしていますが、何か不足しています。

CRAを取り出した後、これらは私が変更/paths.jsに追加したパスです。

module.exports = {
    appBuild: resolveApp('build/app'),
    appPublic: resolveApp('public/app'),
    appHtml: resolveApp('public/app/index.html'),
    appIndexJs: resolveModule(resolveApp, 'src/app'),
    appSrc: resolveApp('src'),
    adminIndexJs: resolveModule(resolveApp, 'src/admin'),
    adminSrc: resolveApp('src'),
    adminPublic: resolveApp('public/admin'),
    adminHtml: resolveApp('public/admin/index.html'),
};

これらのエントリポイントをwebpackに追加しました。

    entry: {
        app: [
            isEnvDevelopment &&
                require.resolve('react-dev-utils/webpackHotDevClient'),
            paths.appIndexJs,
        ].filter(Boolean),
        admin: [
            isEnvDevelopment &&
                require.resolve('react-dev-utils/webpackHotDevClient'),
            paths.adminIndexJs,
        ].filter(Boolean)
    },
    output: {
      path: isEnvProduction ? paths.appBuild : undefined,
      pathinfo: isEnvDevelopment,
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      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, '/')),
    },

HtmlWebpackPluginを次のように変更しました。

  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: paths.appHtml,
        filename: paths.appPublic,
      },
      isEnvProduction
        ? {
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          }
        : undefined
    )
  ),
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: paths.adminHtml,
        filename: paths.adminPublic,
      },
      isEnvProduction
        ? {
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          }
        : undefined
    )
  ),

そして変更されたwebpack Dev Server：

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

私のファイル構造は次のようです：

.
+-- _src
|   +-- app.js
|   +-- admin.js
|   +-- _app
|       +-- App.js
|   +-- _admin
|       +-- App.js
|   +-- _shared
|       +-- serviceWorker.js
+-- _public
|   +-- _app
|       +-- index.html
|       +-- manifest.json
|   +-- _admin
|       +-- index.html
|       +-- manifest.json

ビルドフォルダーにappフォルダーと2つの個別のSPAが含まれるadminフォルダーを含めたいです。

yarn startを実行してもエラーは発生せず、Compiled successfully!と表示されますが、管理アプリではなくアプリが部分的にコンパイルされているだけで、アプリにjsがコンパイルまたは追加されていません。

yarn buildはエラーをスローし、半分コンパイルされたアプリはありますが、管理アプリはありません。これはエラーです：

yarn run v1.12.3
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.

EISDIR: illegal operation on a directory, open 
'foo/bar/public/app'


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ビルドフォルダでは、終了する前に次のように作成されています。

.
+-- _static
|   +-- _css
|   +-- _js
|   +-- _media
|       +-- logo.5d5d9eef.svg
+-- precache-manifest.a9c066d088142837bfe429bd3779ebfa.js
+-- service-worker.js
+-- asset-manifest.json
+-- manifest.json

これを正しく機能させるために私が何を欠いているのか誰かが知っていますか？

reactjswebpackcreate-react-app
5
Richard

これは最新の反応バージョンv2で機能しますが、build（npm run build）でのみ機能します。 npm startをreactフォルダー（クライアント）で実行するとバグが発生します

https://github.com/chiKaRau/git-reactv2-express-multiple-entry-point

その他のソース http://houserqu.com/2018/04/26/create-react-app-%E9%85%8D%E7%BD%AE%E5%A4%9A%E9%A1%B5 ％E9％9D％A2 /

https://www.jianshu.com/p/951287ce12c

http://imshuai.com/create-react-app-multiple-entry-points/

0
user47103