Create-react-app - index.html 如何读取 React 应用程序代码？答案

【问题标题】：Create-react-app - how does index.html read React application code?Create-react-app - index.html 如何读取 React 应用程序代码？
【发布时间】：2018-01-14 09:42:37
【问题描述】：

我是 React 新手，我使用这个解释来构建一个基本的 React 应用程序： https://facebook.github.io/react/docs/installation.html

我通过以下方式打开了一个新项目：

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

index.html 文件位于 hello-world/public 中，其内容如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">

    </div>
  </body>
</html>

然而，所有“React 的东西”都放在 hello-world\src 目录中。看起来 'hello-world\src\index.js' 激活了组件。

我不明白的是 index.html 如何“读取” index.js 的内容。 index.html 没有指向 index.js 的 html 标记。

我可以通过“npm start”来启动这个应用程序。该命令的作用是提升在 localhost:3000 上运行的服务器。不使用“npm start”如何查看应用程序？

【问题讨论】：

这是因为 react 将自己置于 <div id="root"> </div> 之间。
我明白了。我想要的只是双击 index.html 并查看整个应用程序（无需使用“npm start”设置服务器）
您的意思是在dist/ 文件夹中？
@CrazySynthax 只需单击 index.html 即可查看您的内容，您应该使用 webpack 之类的工具，它将所有反应组件代码构建在一个文件中，该文件可能命名为 bundle.min.js然后你只需要将 bundle.min.js 包含在你的 index.html 中

标签： reactjs create-react-app

【解决方案1】：

如果我们查看浏览器上呈现的 DOM（对于 npm start），它注入了以下脚本节点：

<script type="text/javascript" src="/static/js/bundle.js"></script>

同样，对于生产版本 (npm run build)，在 build 文件夹下有一个 index.html 文件，其中注入了类似的 script 节点。

以我为例：

<script type="text/javascript" src="./static/js/main.440dcd65.js">

因此，我倾向于认为脚本节点注入是由react-scripts 库或其依赖项之一完成的。

另外，要在没有网络服务器的情况下运行应用程序，以下应该可以工作：

在 package.json 中定义 "homepage": "./"
运行生产版本 (npm run build)
直接从build 文件夹启动index.html。

已编辑：

./node_modules/react-scripts/config 下的配置似乎负责<script> 节点注入。

例如：./node_modules/react-scripts/config/webpack.config.dev.js 有，

// Generates an index.html file with the <script> injected.
new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
}),

【讨论】：

【解决方案2】：

您只需要将所有代码打包到一个 js 文件中，为此您可以使用 webpack 等工具。

假设你有这样的项目结构：-

Project
-src
    -app.js
-index.html
-package.json
-node-modules

您需要添加 webpack.config.js :- 在您的根目录中，该目录将包含一些用于捆绑您的代码的特定配置。

webpack.config.js 看起来像这样：-

var path = require('path');
var webpack = require('webpack');

BUILD_DIR = path.resolve(__dirname,'dist');
DEV_DIR = path.resolve(__dirname,'src');

var config = {
    entry:DEV_DIR + '/app.js',
    output:{
        path:BUILD_DIR,
        filename:'bundle.min.js',
    },
    module:{
        loaders:[
            {
                test:/\.jsx?/,
                include:DEV_DIR,
                loader:'babel-loader',
                exclude:/node_modules/,
            }
        ]
    },
};
module.exports = config;

在你的根目录中添加一个 .babelrc 文件：-

{
"presets": ["react","es2015","stage-1"]
}

之后在你的根目录运行命令：-webpack 这将创建一个包含您的 bundle.min.js 的 dist 文件夹。

在您的 index.html 中进行编辑：-

<script src = "dist/bundle.min.js"></script>

package.json

"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.4.1",
},

我知道这是一个很大的问题，但在我看来，你必须在进行 react 开发时经历这个过程，所以最好在一开始就完成这个过程。

【讨论】：