使用create-react-app生成单个物理javascript文件
这可能是一个新手问题。我已经使用create-react-app创建了一个小的reactjs应用程序，并且我看到http://localhost:3000/static/js/bundle.js正在提供bundle.js文件。然而，我没有在我的机器上看到一个物理的“捆绑”的javascript文件。我怎样才能生成一个物理捆绑的javascript文件，这样我就可以在我的wordpress php代码中注册它了？我正在构建一个小的wordpress插件，它将在客户端使用reactjs。我是不是漏掉了什么明显的东西？
回答 4
Stack Overflow用户
发布于 2020-03-25 19:38:55
另一种解决方案，如here所建议的，是使用rewire包来操作Create React应用程序的webpack配置，例如
创建新文件scripts/build.js
// npm install rewire
const rewire = require('rewire');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');
// Consolidate chunk files instead
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;
// JS
config.output.filename = 'static/js/[name].js';
// CSS remove MiniCssPlugin
config.plugins = config.plugins.filter(plugin =>
!(plugin instanceof MiniCssExtractPlugin));
// CSS replaces all MiniCssExtractPlugin.loader with style-loader
config.module.rules[2].oneOf = config.module.rules[2].oneOf.map(rule => {
if (!rule.hasOwnProperty('use')) return rule;
return Object.assign({}, rule, {
use: rule.use.map(options => /mini-css-extract-plugin/.test(options.loader)
? {loader: require.resolve('style-loader'), options: {}}
: options)
});
});编辑package.json
{
"scripts": {
...
"build": "npx ./scripts/build.js",
...
}
}Stack Overflow用户
发布于 2018-10-20 21:55:20
我也有同样的问题，简短的答案是NO。至少在标准的"npm run build“中是这样的，该版本目前已经发布到了本文撰写之日。
但是，我将向您展示如何通过帮助您了解正在发生的事情来实现您的目标。首先，您需要认识到create-react-app是基于webpack模块构建器的：
所以要做到这一点，最规范的方法可能是学习webpack，并为创建-反应-应用程序做出贡献，这样它就可以生成一个或多个javascript文件，您可以将其放入Wordpress页面中，而不是生成一个静态的index.html版本的应用程序。我想象类似于"npm run build -js-only“之类的东西。但是AFAICT目前是不可能的。
好消息是，你仍然可以实现将react应用程序“注册”到WP的目标，但首先你需要理解一些概念：
1.关于创建-反应-应用程序
a.当你用create-react-app搭建你的应用程序时，它是在幕后使用webpack来做这件事。它是以create-react-app定义的预定义方式完成此操作的，因此从一开始，您的应用程序就已经被构造为一个index.html文件。
b.当你使用"npm start“进行开发时，实际上是webpack从内存中为你的应用程序提供服务。
c.当你构建你的应用程序时，实际上是webpack (在其他事情中)被用来创建构建目录。
2.删除您生成的应用程序
如果您在使用嵌入式the服务器(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“根”的单一容器，然后你就有了你想要的Javascript文件。
3.在Worpress端上创建概念验证文件
所以这是你问题的实际答案，。正如我上面所说的，这可能远不是理想的，但它确实解决了你所面临的问题。然而，我确实怀疑有一种更容易和更正式的方法来实现这一点，但作为你，我也是React和相关技术的新手，所以希望一些专家最终会参与到这个主题中来，并提出一种更规范的方法。
首先，你需要在某个域名下为你的React应用提供服务，假设它是在myreactapp.local.上提供的
测试你可以通过转到http://myreactapp.local/index.html来访问你的应用程序，你的应用程序应该可以像使用"npm start“一样工作。如果有什么东西坏了，很可能与样式表有关。
一旦你的React应用程序的静态版本开始工作，只需执行以下操作：
- 查看build/index.html文件，您将注意到3脚本标记。其中一个包含实际代码，因此只需复制该代码并在react应用程序的根目录下创建一个名为loadme.js的新脚本(在与index.html).
相同的级别
- 复制完整的index.html文件，并在wordpress的根目录下创建一个名为myreactappskel.html的静态HTML文件(仅用于测试POC)。此文件将作为模板的基础，并将CSS和JS文件注册到Wordpress ;-)
使用react应用程序的服务器(例如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>就是这样！这听起来很复杂，但实际上并非如此。注意一些重要的要点和注意事项：
- 将“根”重命名为其他ID，因为“根”可能会与嵌入它的超文本标记语言中的内容发生冲突。您需要在index.html和index.js源代码中的React源代码中更改此设置。
- 注意脚本是如何在容器div之后的。这就是打包后的超文本标记语言的样子。
- 注意您在上面的步骤中创建的loadme.js文件，它获取了第一个标记的内容。
- 文件的其余部分与生成的文件几乎完全相同。
与Wordpress集成的其余部分对您来说应该是显而易见的。
希望这能有所帮助。
参考
Stack Overflow用户
发布于 2019-10-23 18:31:28
是的，可以通过下面的webpack配置来实现：
在根目录中创建文件webpack.config.js
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")
module.exports = {
mode: "production",
entry: {
"bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
},
output: {
path: path.resolve(__dirname, "build"),
filename: "static/js/bundle.min.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new UglifyJsPlugin()],
}在package.json中
...
"build": "npm run build:react && npm run build:bundle",
"build:react": "react-scripts build",
"build:bundle": "webpack --config webpack.config.js",
...来自here的引用
https://stackoverflow.com/questions/49123097
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号