使用create-react-app生成单个物理javascript文件 [英] Generate single physical javascript file using create-react-app
问题描述
这也许是一个新手问题。
我已经使用create-react-app创建了一个小型reactjs应用，我发现bundle.js文件是通过 http：// localhost：3000 / static / js / bundle.js 。但是，我在计算机上看不到物理的捆绑 javascript文件。如何生成物理捆绑的javascript文件，以便可以在wordpress php代码中注册它？我正在构建一个小的wordpress插件，该插件将在客户端使用reactjs。
我缺少明显的东西吗？
This is perhaps a newbie question. I have created a small reactjs app using create-react-app and I see that the bundle.js file is being served from http://localhost:3000/static/js/bundle.js. However, I do not see a physical "bundled" javascript file on my machine. How can I generate a physical bundled javascript file so I can "register" it in my wordpress php code? I'm building a small wordpress plugin that will use reactjs on the client side. Am I missing something obvious?
推荐答案
我遇到了完全相同的问题，简短的回答是否 。至少使用标准的 npm run build。
I had the same exact problem and the short answer is NO. At least with the standard "npm run build" that is currently shipped up to the date of this writing.
不过，我将向您展示如何通过帮助您了解正在发生的事情来实现目标。首先，您需要认识到create-react-app是基于webpack模块构建器的：
I will however show you how to accomplish your goals by helping you understand what is going on. First, you need to realize that create-react-app is based on the webpack module builder:
因此，实现这一目标的规范方法可能是学习webpack并为create-react-app做贡献，从而代替生成您应用的静态index.html版本，它可能会生成一个或多个javascript文件，您可以将它们放到Wordpress页面中。我想象类似 npm run build -js-only的东西。或类似的东西。
So the canonical way to do this would probably be learning webpack and contributing to create-react-app so that instead of generating a static index.html version of your app, it could generate one or more javascript files that you could drop into a Wordpress page. I imagine something like "npm run build -js-only" or something like that. But AFAICT that is not currently possible.
好消息是，您仍然可以实现注册域名的目标。将您的React应用程序放入WP，但首先您需要了解一些概念：
The good news is that you can still accomplish your goal of "registering" your react app into WP but first you need to understand some concepts:
1。关于create-react-app
a。当您使用create-react-app架设您的应用程序时，它是在后台使用webpack来执行此操作。这样做是以create-react-app定义的预定义方式进行的，因此从一开始，您的应用就已经结构化为可作为index.html文件使用。
a. When you scaffold your app with create-react-app, it's using webpack under the hood to do this. It's doing this in a pre-defined way defined by create-react-app, so from the start, your app is already structured to be served as an index.html file.
b。当您使用 npm start进行开发时，
b. When you are developing with "npm start" it is actually webpack serving your app from RAM.
c。实际上是webpack从RAM为您的应用程序提供服务。
c. When you build you app, it is actually webpack (amongst other things) that is used to create that build directory.
c。构建应用程序时，实际上是用于创建该构建目录的webpack（除其他外）。
2. Disect your Generated App
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>
So basically, you have some header code that loads manifests and stylesheets. Then you have a single container with id "root" and THEN you have the Javascript files you're looking for.因此，基本上，您具有一些用于加载清单和样式表的标头代码。然后，您只有一个容器，其ID为 root ，然后便有了所需的Javascript文件。
3. Create a Proof of Concept HTML File on the Worpress Side
3。在Worpress方面创建概念证明HTML文件
这是您问题的实际答案。就像我在上面说的那样，这可能远非理想，但确实可以解决您遇到的问题。但是，我确实怀疑有一种更简单，更正式的方法可以完成此任务，但是作为您，我还是React和相关技术的新手，因此希望最终有专家能对此有所帮助并提出更规范的建议。
First you need to serve you React app under some domain, suppose it's being served at myreactapp.local.
首先，您需要在某个域下为您的React应用程序提供服务，假设它已在 myreactapp.local 中提供。
Test that you can access your app by going to http://myreactapp.local/index.html and your app should work just as it did with "npm start". If something breaks, it's probably related to your stylesheets.
通过访问 http：//myreactapp.local/index.html 来测试您可以访问您的应用程序并且您的应用应该像使用 npm start一样正常工作。如果有问题，则可能与您的样式表有关。
Once you get the static version of your React app to work, just do this:
一旦您使React应用程序的静态版本正常工作，只需执行以下操作：
Look into the build/index.html file and you will notice 3 script tags. One of them has actual code in there, so just copy that code and create a new script on the ROOT of of your react app called loadme.js (at the same level as index.html).
-
查看build / index.html文件，您会注意到 3个脚本标签。其中一个包含实际代码，因此只需复制该代码，然后在您的React应用的ROOT上创建一个名为 loadme.js 的新脚本（与index.html处于同一级别）。 / p>
-
复制完整的index.html文件，并在您的wordpress根目录中创建一个静态HTML文件myreactappskel.html（仅用于测试POC） ）。此文件将用作模板以及将CSS和JS文件注册到Wordpress的基础;-）
Copy the complete index.html file and create a static HTML file in the root of your wordpress called myreactappskel.html (just for testing the POC). This file will will serve as the basis for your templates and registering of the CSS and JS files into Wordpress ;-)
编辑文件并整齐地格式化它，将所有相对路径替换为react应用的服务器URL（例如myreactapp.local）。
Edit the file and format it neatly, replacing all relative paths with the URL of the server fo the react app (e.g. myreactapp.local).
您应该最终得到一个类似于以下文件：
You should end up with a file similar to this:
<!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,initial-scale=1,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>
就是这样！听起来很复杂，但实际上并非如此。请注意一些要点和注意事项：
And that's it! It sounds complicated but it's really not. Notice some important points and caveats:
-
重命名 root其他 ID，因为 root可能会与嵌入其中的HTML中的某些内容发生冲突。您需要在React源代码中的index.html和index.js源代码中都进行此更改。
Rename the "root" to some other ID because "root" will likely collide with something in the HTML where this is embedded. You need to change this in your React source code in both index.html and index.js sources.
请注意，脚本之后集装箱分部打包后的HTML就是这样。
Notice how the scripts are AFTER the container div. This is exactly how the packed HTML looks like.
请注意您在上一步中通过获取以下内容创建的loadme.js文件：第一个标记。
Notice the loadme.js file which you created in a step above by taking the contents of the first tag.
文件的其余部分几乎与生成的文件相同。
The rest of the file is almost identical to the generated file.
与Wordpress集成的其余部分对您来说应该很明显。
The rest of the integration to Wordpress should be pretty obvious to you.
希望这会有所帮助。
参考
https://facebook.github.io/create-react-app/docs/deployment
这篇关于使用create-react-app生成单个物理javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
