我使用
创建了一个 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 ???
最佳答案
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,
};
关于reactjs - 当你运行时,npm start,index.js 是如何被拾起运行的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61816595/