Question

我最近开始反应。

我的 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中的index.html div元素？我想知道它工作正常。请解释一下。

我已经运行了这些命令来创建应用

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

Answer 1

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在路径paths.appHtml加载html。

这个谜题的最后一部分是将其与您发布的文件相关联。发布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

你的两个问题。
哇！这是一段相当艰难的旅程......：P

Answer 2

To consolidate @Aftab Khan comments 

npm start 

Below adding individual links for above commands for node @8.9.4
@node_modules/react-scripts/bin/react-scripts.js  >> line number 35
@node_modules/react-scripts/scripts/start.js  >> line number 46
@node_modules/react-scripts/config/webpack.config.dev.js >> line number 21, 102
@node_modules/react-scripts/config/paths.js >> line number 56

如何将React JS index.js文件与index.html联系以获取id引用？

2 个答案: