node.js - 如何将 webpack 捆绑的 nodejs express 应用程序添加到 wordpress 页面?
问题描述
我有一个全栈应用程序,前端有 React,内置于 nodejs/express 后端。node server.bundle.js
我使用 webpack 来捆绑应用程序,当我在终端中运行命令时,可以在 localhost:3000 上查看它。我一直试图通过添加脚本让应用程序显示在 wordpress 页面模板中<script src="/dist/server.bundle.js"></script>
,但没有成功。请帮我指出正确的方向。
服务器.js
import express from "express";
import path from "path";
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "./client/app.js";
function handleRender(req, res) {
const reactHtml = ReactDOMServer.renderToString(<App />);
const htmlTemplate = `<!DOCTYPE html>
<html>
<head>
<title>Universal React server bundle</title>
</head>
<body>
<div id="app">${reactHtml}</div>
<script src="public/client.bundle.js"></script>
</body>
</html>`;
res.send(htmlTemplate);
}
const app = express();
app.use("/public", express.static("./public"));
app.get("*", handleRender);
app.listen(3000);
console.log("App is running on http://localhost:3000");
Webpack.config.js
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const clientConfig = {
entry: './client/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'public/client.bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
const serverConfig = {
entry: './server.js',
target: "node",
devtool: "source-map",
externals: [nodeExternals(), {
"react": "React",
"react-dom": "ReactDOM"
}],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'server.bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.BannerPlugin({
banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false
})
]
};
module.exports = [clientConfig, serverConfig];
包.json
{
"name": "twentynineteen",
"version": "1.0.0",
"description": "Creating a server bundle with webpack",
"main": "index.js",
"bugs": {
"url": "https://github.com/WordPress/twentynineteen/issues"
},
"homepage": "https://github.com/WordPress/twentynineteen#readme",
"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"@wordpress/browserslist-config": "^2.5.0",
"@wordpress/scripts": "^9.0.0",
"autoprefixer": "^9.6.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"chokidar-cli": "^2.0.0",
"html-webpack-plugin": "^4.3.0",
"node-sass": "^4.12.0",
"rtlcss": "^2.4.0",
"source-map-support": "^0.4.14",
"webpack": "^3.5.5",
"webpack-node-externals": "^1.5.4"
},
"map": false
},
"browserslist": [
"extends @wordpress/browserslist-config"
],
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
"clean": "rm -rf dist",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
}
}
函数.php
// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueued_bundled_theme_js' );
function my_enqueued_bundled_theme_js() {
wp_enqueue_script(
'my-theme-frontend',
get_stylesheet_directory_uri() . '/dist/server.bundle.js',
['wp-element'],
time(), // Change this to null for production
true
);
}
解决方案
推荐阅读
- hadoop - 在 JVM 中运行 Hadoop MapReduce 的最简单方法是什么,无需安装任何东西?
- android - 如何扩展 RecyclerView 以允许“合并”项目?
- c# - Web API 的自定义方法,它不是标准的 CRUD 方法
- arrays - .Filter() 在未定义时删除一个或多个数组
- visual-studio-code - Editor: Trim Auto Whitespace 和 Files: Trim Trailing Whitespace in VSCode Settings 之间的区别
- spark-streaming - java.lang.IllegalAccessError:试图访问方法 org.apache.avro.specific.SpecificData.()V
- google-cloud-platform - 如何将 Google Cloud Dataproc 上的 Hive 数据库连接到 Tableau
- java - 在火花流中处理多个流后提交偏移量
- highcharts - Highchart,如何在中间垂直对齐一条线?
- excel - 通过递增到 Excel 中的特定行来获取价值