React JS index.js 文件如何联系 index.html 以获取 id 引用？ [复制]
Posted
技术标签:
【中文标题】React JS index.js 文件如何联系 index.html 以获取 id 引用？ [复制]【英文标题】：How React JS index.js file contacting index.html for id references? [duplicate] 【发布时间】：2017-06-03 22:52:35 【问题描述】：我最近开始使用 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 元素的呢？我想知道它工作正常。请解释一下。
我已经运行了这些命令来创建应用程序
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
【问题讨论】：
webpack 是一个捆绑器，可以将您的 JS 捆绑到单个文件（例如 index.js）并将其注入另一个文件（例如 index.html）。在他们的页面上阅读更多关于 webpack 的信息，因为它非常强大，我无法解释他们所做的一切 在哪里可以找到捆绑的文件？ 我对 react-create-app 的设置不太熟悉，请在控制台中查看它从中加载文件的位置。很可能来自 webpack 的服务器内存，因为它带有自己的开发服务器或在 dist/ 目录中 @Mr_Perfect 如果您想在 reactapp 中查看 webpack 的内部工作原理，请运行此命令以弹出显式设置。npm run eject。通过这种方式，您将能够看到 create-react-app 用于构建您的应用程序的命令。
【参考方案1】：
Create-React-App 有一个非常有趣的设置。
我开始挖掘package.json npm 脚本start
"start": "react-scripts start"
这会将我带到node_modules/.bin 下的二进制react-scripts
我会在这里发布相关的东西。
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 模块(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 加载路径paths.appHtml 处的html。
难题的最后一部分是将其链接回您发布的文件。
从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
node_modules/.bin 下的react-scripts 二进制文件更改了如下逻辑。基本上做同样的事情。
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'),
...
;
【讨论】：
node_modules 内部很好。不幸的是，我猜他们更改了一些名称，因为我在 node_modules/react-scripts/scripts/start.js 文件的任何地方都找不到 node_modules/react-scripts 路径。 @Carmine 您能否提及您的 react-scripts 版本，如果需要，我会更新答案。 这个问题突然出现在我的脑海中，深入到 index.html，然后开始浏览，在这里我找到了！干得好:) @AftabKhan 好家伙！ @AftabKhan 很棒的答案！我非常感谢您向我们展示如何挖掘相关信息的方式！我一生大部分时间都是后端人员，所以作为 JS/react 的新手，这简直是天赐之物！谢谢！以上是关于React JS index.js 文件如何联系 index.html 以获取 id 引用？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何在类组件中使用 React.useContext(AuthContext) 来触发 index.js 文件中的条件集
如何使用 expressJS 提供 ReactJS 静态文件？