Aji*_*oel 6 reactjs create-react-app
这可能是一个新手问题.我使用create-react-app创建了一个小的reactjs应用程序,我看到bundle.js文件是从http:// localhost:3000/static/js/bundle.js提供的.但是,我没有在我的机器上看到物理"捆绑"的javascript文件.如何生成物理捆绑的javascript文件,以便我可以在我的wordpress php代码中"注册"它？我正在构建一个小型wordpress插件,它将在客户端使用reactjs.我错过了一些明显的东西吗
phd*_*ign 12
另一种解决方案，如建议在这里，是使用再布线封装操纵创建应用程序做出反应的的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",
...
}
}
是的，可以通过以下 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",
...
从这里参考
我有同样的问题,简短的答案是否定的.至少使用标准的"npm run build",目前发布到本文撰写之日.
然而,我将通过帮助您了解正在发生的事情向您展示如何实现目标.首先,您需要意识到create-react-app基于webpack模块构建器:
因此,这样做的规范方法可能是学习webpack并为create-react-app做出贡献,这样就可以生成一个或多个javascript文件而不是生成应用程序的静态index.html版本,这些文件可以放到Wordpress中页.我想像"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
使用react-app-rewiredsidecustomize-cra来生成包含样式的单个JS包：
配置覆盖.js
const { override, adjustStyleLoaders } = require('customize-cra');
module.exports = override(
(config) => {
config.optimization.splitChunks = {
cacheGroups: { default: false }
};
config.optimization.runtimeChunk = false;
return config;
},
adjustStyleLoaders(({ use }) => {
use.forEach((loader) => {
if (/mini-css-extract-plugin/.test(loader.loader)) {
loader.loader = require.resolve('style-loader');
loader.options = {};
}
});
})
);
| 归档时间： |
|
| 查看次数： |
3635 次 |
| 最近记录： |