reactjs - 当你运行时，npm start，index.js 是如何被拾起运行的

Question

我使用

创建了一个 React 项目

create-react-app react-app

然后创建了一个包含所有文件夹的 react-app。 (使用 Visual Studio 代码)

然后使用rimraf删除了“src”文件夹

然后打开 index.html 并删除其中的所有内容。

那么!并在 index.html 中输入并创建 HTML 样板代码

然后在里面创建了下面的div，

 <div id="root">
      React Component goes here....
 </div>

现在创建“src”文件夹并在其中创建具有以下内容的“index.js”，

import React from "react";
import ReactDOM from "react-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import HelloComponent from "./components/helloComponent";
import BindingComponent from "./components/bindingComponent";

ReactDOM.render(
  <React.Fragment>
    <HelloComponent name={"Rohit"} />
    <HelloComponent />

    <BindingComponent></BindingComponent>
  </React.Fragment>,
  document.querySelector("#root")
);

在“package.json”中，我在脚本部分有以下内容，

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

还在components文件夹中创建了React Components

现在当我使用 npm start 运行时，它如何调用 index.js ？？？

Answer 1

npm start 是 npm run start 的简写，调用 react-scripts 启动脚本。

如果我们调查他们的 github repo 中的脚本，我们发现入口是在他们的webpack.config.js文件中配置的:

entry:
      isEnvDevelopment && !shouldUseReactRefresh
        ? [
            webpackDevClientEntry,
            paths.appIndexJs,
          ]
        : paths.appIndexJs,

路径在 paths.js 文件中定义:

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrlOrPath,
};