Question

我是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”的情况下查看应用程序？

Answer 1

如果我们查看在浏览器上呈现的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服务器的情况下运行应用程序，以下内容应该有效：

在package.json

"homepage": "./"

运行生产构建（npm run build）
直接从index.html文件夹启动build。

<强>编辑：

./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,
}),

Answer 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.js：create-react-app

2 个答案: