我使用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,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>
就是这样！这听起来很复杂,但事实并非如此.请注意一些重点和注意事项：
>将“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