当你运行 npm start 时，index.js 是如何被选取来运行的

Question

我使用创建了一个反应项目

create-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"
  },

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

现在，当我运行 using 时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,
};