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

雷逸仙

2023-03-14

问题内容：

我最近开始做出反应。

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

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

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

问题答案：

Create-React-App 有一个非常有趣的设置。

我开始挖掘package.jsonnpm脚本start

“ 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 module（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

您的两个文件有问题。
哇！那是一段漫长的旅程..：P

更新1- 截至react-scripts@3.x

下面的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配置已合并为一个。
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'),
  ...
};

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

相关阅读

相关文章

相关问答

相关工具

相关文档