У меня полнофункциональное приложение с React на внешнем интерфейсе, встроенное в бэкэнд-узел nodejs / express. Я использовал webpack, чтобы связать приложение, и его можно посмотреть на localhost: 3000, когда я запускаю команду node server.bundle.js в терминале. Я пытался заставить приложение отображаться в шаблоне 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
);
}