BinaryDevelop
  1. ホーム
  2. reactjs

[解決済み] React JS index.js ファイルが id 参照のために index.html に連絡する方法とは？重複

2022-09-18 14:19:37

質問

最近reactを始めました。

私の index.html が含まれています。 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

そして index.js には 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

私の疑問は、私が言及しなかった index.js の中のどのスクリプトタグにも index.html . しかし、どのようにして root の div 要素をどのように参照しているのでしょうか。 index.html ? 問題なく動作しているので不思議に思っています。説明お願いします。

私は以下のコマンドを実行してアプリを作成しました。 

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

どのように解決するのですか？

Create-React-App は非常に面白い設定になっています。

を掘り始めたのは package.json npm スクリプト start

"start": "react-scripts start"

バイナリに移動します react-scripts の下にある node_modules/.bin

ここに関連するものを載せておきます。 

switch (script) {
  case 'build':
  case 'eject':
  case 'start':
  case 'test': {
    const result = spawn.sync(
      'node',
      [require.resolve('../scripts/' + script)].concat(args),
      { stdio: 'inherit' }
    );

の中のスクリプトを探していることが分かります。 ../scripts/ フォルダの中にあるスクリプトを探していることがわかります。

そこで、react-scriptsのnpmモジュール( node_modules/react-scripts ) を開き node_modules/react-scripts/scripts/start.js をやっていたので、ファイルを npm start .

さて、ここで探していたwebpackの設定が見つかりました。

具体的に言及していたのは node_modules/react-scripts/config/webpack.config.dev.js . ここに関連するものを載せておきます。 

entry: [
  // Finally, this is your app's code:
  paths.appIndexJs,
],
plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
  }),

で参照されるファイルは paths.appIndexJs が webpack の設定にあるエントリーファイルです。

そして、彼らが使っているのは HtmlWebpackPlugin というパスで html を読み込んでいます。 paths.appHtml .

パズルの最後のピースは、これを投稿したファイルにリンクさせることです。 から関連するものを投稿することです。 paths.js 

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  ...
}

で、アプリケーションディレクトリの中。

appHtmlはファイル public/index.html

appIndexJsはファイル src/index.js

あなたの問題の2つのファイル。

わあああああああああああああああああああああああああああああああああああああああああああああ それはかなりの旅でした...:P

アップデート 1 - 現在のところ [email protected]

は react-scripts の下にあるバイナリ node_modules/.bin は、以下のようにロジックを変更しました。本質的には同じことをやっています。 

if (['build', 'eject', 'start', 'test'].includes(script)) {
  const result = spawn.sync(
    'node',
    nodeArgs
      .concat(require.resolve('../scripts/' + script))
      .concat(args.slice(scriptIndex + 1)),
    { stdio: 'inherit' }
  );

dev & prodのwebpackの設定を1つにまとめました。

const configFactory = require('../config/webpack.config');

HTMLWebpackPluginの設定は以下のようになります。 - これは、この上に本番用の設定を条件付きで追加する必要があるためです。 

plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: paths.appHtml,
      },

パス・ファイルのコードがいくつか更新されました 

module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  ...
};

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します