logo标签列表

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

reactjscreate-react-app
6

我是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 stuff”都放在hello-world\src目录下。看起来是'hello-world\src\index.js'激活了组件。

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

我可以通过执行“npm start”来启动此应用程序。这个命令会在localhost:3000上启动一个服务器。我如何在不使用“npm start”的情况下查看应用程序？

1
这是因为React将自己放置在<div id="root"> </div>之间。 - Zorig
我理解了。我想要的只是双击index.html文件，然后查看整个应用程序（无需使用“npm start”设置服务器）。 - CrazySynthax
你是指在 dist/ 文件夹里吗？ - Zorig
要通过单击index.html查看您的内容，您应该使用像webpack这样的工具，它将在一个单独的文件中构建所有React组件代码，该文件可能命名为bundle.min.js，然后您只需要在index.html中包含该bundle.min.js。 - Vinit Raj
2个回答
3

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

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

同样地，对于生产构建(npm run build)，在构建文件夹下有一个名为index.html的文件，其中包含一个类似的被注入的script节点。

以下是我的示例：

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

因此，我倾向于认为脚本节点注入是由react-scripts库或其依赖项之一完成的。
另外，要在没有Web服务器的情况下运行应用程序，请按以下步骤操作：
1. 在package.json中定义"homepage": "./" 2. 运行生产构建（npm run build） 3. 直接从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,
}),
1
你只需要将所有的代码打包到一个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时你必须经历这个过程，所以最好在开始时就经历一下。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接