reactjs – 使用create-react-app生成单个物理javascript文件

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

导读：这可能是一个新手问题. 我使用create-react-app创建了一个小的reactjs应用程序,我看到bundle.js文件是从 http://localhost:3000/static/js/bundle.js提供的.但是,我没有在我的机器上看到物理“捆绑”的javascript文件.如何生成物理捆绑的javascript文件,以便

这可能是一个新手问题.
我使用create-react-app创建了一个小的reactjs应用程序,我看到bundle.js文件是从 http://localhost:3000/static/js/bundle.js提供的.但是,我没有在我的机器上看到物理“捆绑”的javascript文件.如何生成物理捆绑的javascript文件,以便我可以在我的wordpress php代码中“注册”它？我正在构建一个小型wordpress插件,它将在客户端使用reactjs.
我错过了一些明显的东西吗

解决方法

我有同样的问题,简短的答案是否定的.至少使用标准的“npm run build”,目前发布到本文撰写之日.

然而,我将通过帮助您了解正在发生的事情向您展示如何实现目标.首先,您需要意识到create-react-app基于webpack模块构建器：

https://webpack.github.io

因此,这样做的规范方法可能是学习webpack并为create-react-app做出贡献,这样就可以生成一个或多个javascript文件而不是生成应用程序的静态index.html版本.页.我想像“npm run build -js-only”之类的东西.但AFAICT目前还不可能.

好消息是你仍然可以实现将你的反应应用程序“注册”到WP中的目标,但首先你需要了解一些概念：

1.关于create-react-app

一个.当您使用create-react-app构建应用程序时,它会使用引擎盖下的webpack来执行此操作.它是以create-react-app定义的预定义方式执行此操作,因此从一开始,您的应用程序已经构建为作为index.html文件提供.

湾当您使用“npm start”开发时,实际上是webpack从RAM为您的应用程序提供服务.

C.当您构建应用程序时,实际上是用于创建该构建目录的webpack(以及其他内容).

2.删除您生成的应用程序

如果您在使用嵌入式Web服务器(npm start)测试应用程序时查看源代码,您会发现它是一个非常短的html文件,具有典型结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <!--
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
    -->
    <link rel="stylesheet" href="./bootstrap.min.css">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

所以基本上,你有一些加载清单和样式表的头代码.然后你有一个id为“root”的容器,那么你有你正在寻找的Javascript文件.

3.在Worpress一侧创建一个概念证明HTML文件

所以这是你问题的实际答案.正如我上面所说,这可能远非理想,但它确实解决了你遇到的问题.我确实怀疑有一种更容易和更正式的方法来实现这一点,但是作为你,我也是React和相关技术的新手,所以希望一些专家最终会最终权衡这个主题,并提出一个更规范的办法.

首先,你需要在某个域下为你提供React app,假设它是在myreactapp.local上提供的.

通过转到http://myreactapp.local/index.html测试您可以访问您的应用程序,您的应用程序应该像“npm start”一样工作.如果出现问题,可能与您的样式表有关.

一旦你的React应用程序的静态版本工作,只需这样做：

>查看build / index.html文件,您会注意到3个脚本标记.其中一个有实际的代码,所以只需复制该代码并在您的反应应用程序的ROOT上创建一个名为loadme.js的新脚本(与index.html处于同一级别).
>复制完整的index.html文件,并在wordpress的根目录中创建一个名为myreactappskel.html的静态HTML文件(仅用于测试POC).该文件将作为模板的基础,并将CSS和JS文件注册到Wordpress中;-)
>编辑文件并整齐地格式化,用反应应用程序的服务器的URL替换所有相对路径(例如myreactapp.local).

你应该得到一个类似于这样的文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="http://myreactapp.local/favicon.ico">
    <meta name="viewport" content="width=device-width,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="http://myreactapp.local/manifest.json">
    <link rel="stylesheet" href="http://myreactapp.local/bootstrap.min.css">
    <title>My React App POC Static Page in WordPress</title>
    <link href="http://myreactapp.local/static/css/1.7fbfdb86.chunk.css" rel="stylesheet">
    <link href="http://myreactapp.local/static/css/main.ebeb5bdc.chunk.css" rel="stylesheet">
  </head>

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="someotherid"></div>
    <script src="http://myreactapp.local/loadme.js"></script>
    <script src="http://myreactapp.local/static/js/1.b633dc93.chunk.js"></script>
    <script src="http://myreactapp.local/static/js/main.8958b7bb.chunk.js"></script>

</html>

就是这样！这听起来很复杂,但事实并非如此.请注意一些重点和注意事项：

>将“root”重命名为其他ID,因为“root”可能会与嵌入此内容的HTML中的某些内容发生冲突.您需要在index.html和index.js源中的React源代码中更改此设置.
>注意脚本如何在容器div之后.这正是打包HTML的样子.
>通过获取第一个标记的内容,注意您在上面的步骤中创建的loadme.js文件.
>文件的其余部分几乎与生成的文件相同.

对Wordpress的其余整合应该是非常明显的.

希望这可以帮助.

参考

https://facebook.github.io/create-react-app/docs/deployment

https://webpack.github.io

（编辑：李大同）

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