React JS index.js 文件如何联系 index.html 以获取 id 引用? [英] How React JS index.js file contacting index.html for id references?
问题描述
我最近开始接触 React.
I recently get started with react.
我的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.html 的任何脚本标签中提到 index.js.但是它是如何引用 index.html 中的 root div 元素的呢?我想知道它工作正常.请解释一下.
My doubt is I didn't mention index.js in any script tag in index.html. But how it is referencing the root div element in index.html? I was wondering as it is working fine. Please explain me.
我已经运行这些命令来创建应用程序
I had run these commands to create the app
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
推荐答案
Create-React-App 有一个非常有趣的设置.
Create-React-App has a very interesting setup.
我开始挖掘 package.json npm 脚本 start
I started digging in the package.json npm script start
开始":反应脚本开始"
"start": "react-scripts start"
这将我带到 node_modules/.bin
下的二进制 react-scripts我会在这里发布相关内容.
That takes me to their binary react-scripts under node_modules/.bin
I'll post the relevant stuff here.
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test': {
const result = spawn.sync(
'node',
[require.resolve('../scripts/' + script)].concat(args),
{ stdio: 'inherit' }
);
所以这告诉我他们正在 ../scripts/ 文件夹中寻找脚本.
So this tells me that they are looking for script inside ../scripts/ folder.
所以我转到 react-scripts npm 模块(node_modules/react-scripts)并打开 node_modules/react-scripts/scripts/start.js 文件因为我在做 npm start.
So I go to the react-scripts npm module(node_modules/react-scripts) and open up the node_modules/react-scripts/scripts/start.js file since I was doing npm start.
现在我在这里找到了我正在寻找的 webpack 配置.
他们特别指的是 node_modules/react-scripts/config/webpack.config.dev.js.我会在这里发布相关内容.
Now here is where I found the webpack config I was looking for.
They were specifically referring to node_modules/react-scripts/config/webpack.config.dev.js. I'll post the relevant stuff here.
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引用的so文件就是webpack配置中的入口文件.
So file referred by paths.appIndexJs is the entry file in the webpack config.
他们正在使用 HtmlWebpackPlugin 在路径上加载 html <代码>paths.appHtml.
And they are using HtmlWebpackPlugin to load the html at the path paths.appHtml.
拼图的最后一部分是将此链接回您发布的文件.从 paths.js
Final piece of the puzzle is linking this back to the files you posted.
Posting relevant stuff from 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
So inside your application directory,
appHtml is file public/index.html
appIndexJs is file src/index.js
你的两个文件有问题.
哇！那真是一段旅程..:P
Your two files in question.
Wow! That was quite a journey..:P
更新 1 - 从 react-scripts@3.x
node_modules/.bin 下的 react-scripts 二进制文件更改了如下逻辑.基本上做同样的事情.
The react-scripts binary under node_modules/.bin has changed the logic as below. Essentially doing the same thing.
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 & 的 webpack 配置prod 已合二为一.const configFactory = require('../config/webpack.config');
The webpack configs for dev & prod has been combined into one.
const configFactory = require('../config/webpack.config');
HTMLWebpackPlugin 配置看起来像这样 - 这是因为他们必须有条件地在此之上添加生产配置
The HTMLWebpackPlugin config looks like this - This is since they have to conditionally add production config on top of this
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
路径文件代码有一些更新
The paths file code has some updates
module.exports = {
...
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
...
};
这篇关于React JS index.js 文件如何联系 index.html 以获取 id 引用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
