reactjs – React JS index.js文件如何联系index.html获取id引用

发布时间：2020-12-15 20:55:44 所属栏目：百科来源：网络整理

导读：我最近开始反应。我的index.html包含 !DOCTYPE htmlhtml 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" titleReact App/title /head

我最近开始反应。

我的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中的根div元素？我想知道它工作正常。请解释一下。

我已经运行这些命令来创建应用程序

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Create-React-App是非常有趣的设置。

我开始从package.json npm脚本开始挖掘

“start”: “react-scripts start”

这将我带到node_modules / .bin下的二进制react脚本
我会在这里发布相关的东西。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!