Fatal编程技术网
  • node.js/
  • Node.js 如何将网页包捆绑的nodejs express应用程序添加到wordpress页面？

Node.js 如何将网页包捆绑的nodejs express应用程序添加到wordpress页面？

node.js reactjs wordpress express webpack

Node.js 如何将网页包捆绑的nodejs express应用程序添加到wordpress页面？,node.js,reactjs,wordpress,express,webpack,Node.js,Reactjs,Wordpress,Express,Webpack,我有一个完整的堆栈应用程序，前端带有React，内置于nodejs/express后端。我使用webpack捆绑应用程序，当我在终端中运行命令node server.bundle.js时，可以在localhost:3000上查看它。我一直试图通过添加脚本，使应用程序显示在wordpress页面模板中，但没有成功。请帮我指出正确的方向 Server.js Package.json functions.php server.bundle.js是否运行？您得到的错误是什么？是的server.bundl

我有一个完整的堆栈应用程序，前端带有React，内置于nodejs/express后端。我使用webpack捆绑应用程序，当我在终端中运行命令
node server.bundle.js
时，可以在localhost:3000上查看它。我一直试图通过添加脚本
，使应用程序显示在wordpress页面模板中，但没有成功。请帮我指出正确的方向

Server.js Package.json functions.php 
server.bundle.js是否运行？您得到的错误是什么？是的
server.bundle.js在localhost:3000上的开发中运行。它显示完整的应用程序。我只是无法让应用程序显示在wordpress页面上。成功了吗？
server.bundle.js
运行了吗？您得到的错误是什么？是的
server.bundle.js在localhost:3000上的开发中运行。它显示完整的应用程序。我只是无法让应用程序显示在wordpress页面上。成功了吗？

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");



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];



{
  "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"
  }
}



// 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
  );
}