> 前端笔记 > 在wordpress页面中嵌入React页面应用

在wordpress页面中嵌入React页面应用

前端笔记、

想实现一个“技术题库”的专栏，用来收藏一些经典题型、不太熟悉的面试题/技术题，采局部React应用的方式实现

一：XAMPP环境

本地启用wordpress，还原现网主题与配置，启用本地测试域名

1.1：本地wordpress

XAMPP是免费的集成安装包（下载地址），集成了Apache、php8、mysql、phpMyAdmin

  • 下载wordpress解压到自己想要放的位置，我选择在/xampp/apps/www.hu365.test
  • 把线上使用的主题完整下载并在本地主题使用
  • 通过phpMyAdmin，创建数据库并导入线上的备份数据
  • 配置xampp/apache/conf/extra/httpd-vhosts.conf文件，添加本地测试域名：www.hu365.test
  • 本地host文件，将www.hu365.test指向127.0.0.1

此时，就可以通过www.hu365.test访问和线上环境一样的页面了

1.2：wordpress页面

新建页面技术题库，使用代码编辑器，引入最新的react.js、以及生产js、css

<!-- 所有额外引入的js、css -->
<div>
	<script src="/wp-content/apps/topic-bank/static/js/react.production.min.js" crossorigin></script>
	<script src="/wp-content/apps/topic-bank/static/js/react-dom.production.min.js" crossorigin></script>
	<script defer="defer" src="/wp-content/apps/topic-bank/static/js/main.js"></script>
	<link href="/wp-content/apps/topic-bank/static/css/main.css" rel="stylesheet">
</div>
<!-- 这是react渲染节点 -->
<div id="react_root"></div>
  • 这里有进行格式化排版，实际代码为了减少多余换行，去掉了所有换行与空格
  • 引入路径都是用绝对路径引入
  • 路径/wp-content/apps/topic-bank是react指定的生产目录
  • main.js、main.css为生产环境不含hash的最终文件，此举是为了测试，异步加载主js
  • 页面访问路径（URL），需在路由配置中配置为basename，此处配置为/topic-bank

二：React应用

使用create-react-app构建react app，配置生产文件名、生产路径、静态资源等

2.1：替换index.html

访问本地页面：技术题库，右键另存为页面得到index.html页面和资源文件夹

  • 把资源文件夹重命名：static，并在static下新建文件夹：js、css
  • js文件移动到js文件夹，css文件移动到css文件夹，并同步修改相关引用路径
  • 下载react.production.min.js、react-dom.production.min.js到js文件夹

此举是为了实现测试环境的样式和线上相同，方便直接使用react进行调试开始

2.2：生产配置

因为create-react-app构建应用无法直接修改webpack，这里需要安装使用react-app-rewired，可以同步安装customize-cra

npm install react-app-rewired --save-dev

创建文件config-overrides.js，在其中修改配置：

module.exports = function override(config, env) {
	// 仅修改生产配置
	if (env !== 'production') return config;
	const paths = require('react-scripts/config/paths');

	// 额外引入的
	// react.production.min.js、react-dom.production.min.js
	// 不参与打包
	config.externals = {
		'react': 'React',
		'react-dom': 'ReactDOM',
	}

	// 生产输出目录
	// 与"页面"中路径一致：/wp-content/apps/topic-bank
	config.output.path = "C:/xampp/apps/www.hu365.dev/wp-content/apps/topic-bank";
	paths.appBuild = "C:/xampp/apps/www.hu365.dev/wp-content/apps/topic-bank";

	// Get rid of hash for js files
	// 方便测试，脚本文件去除hash
	config.output.filename = "static/js/[name].js";
	config.output.chunkFilename = "static/js/[name].chunk.js";

	// Get rid of hash for css files
	// 方便测试，样式文件去除hash
	const miniCssExtractPlugin = config.plugins.find(element => element.constructor.name === "MiniCssExtractPlugin");
	miniCssExtractPlugin.options.filename = "static/css/[name].css";
	miniCssExtractPlugin.options.chunkFilename = "static/css/[name].css";

	// Get rid of hash for media files
	// 方便测试，其他文件去除hash
	config.module.rules[1].oneOf.forEach(oneOf => {
		if (!oneOf.options || oneOf.options.name !== "static/media/[name].[hash:8].[ext]") {
			return;
		}
		oneOf.options.name = "static/media/[name].[ext]";
	});
	return config;
}

2.3：添加路由

新建router/index.tsx

// 列表页、和详情页
import TopicList from "../views/TopicList";
import TopicContent from "../views/TopicContent";
import {
	createBrowserRouter,
	RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
	{
		path: "/",
		element: <TopicList />,
	},
	{
		path: "/topicName",
		element: <TopicContent />,
	},
], {
	// 通过环境变量配置基础路径
	basename: process.env.REACT_APP_ROUTER_BASE_NAME
});

export default function Router() {
	return (
		<RouterProvider router={router} />
	)
}

环境变量配置：

// 测试环境：.env.development
// 随意填写
REACT_APP_ROUTER_BASE_NAME = /

// 生产环境：.env.production
// 该路径必须和"页面"访问URL相同，否则无法访问（/topic-bank）
REACT_APP_ROUTER_BASE_NAME = /topic-bank

2.4：配置别名

正在开发中，忽然发现../../*的书写格式还是太丑了，赶紧把别名加上
webpack的alias配置，同样在config-override.js中配置：

const path = require("node:path");

module.exports = function override(config, env) {
    // 相对路径别名
    config.resolve.alias = {
        '@': path.resolve(__dirname, 'src'),
        '@Pages': path.resolve(__dirname, 'src/pages'),
        '@Style': path.resolve(__dirname, 'src/style'),
        '@Components': path.resolve(__dirname, 'src/components'),
    };

    // 其他内容
    
    return config;
}

TS配置，tsconfig.json文件：

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./*"],
      "@Pages/*": ["./pages/*"],
      "@Style/*": ["./style/*"],
      "@Components/*": ["./components/*"]
    }
  },
  ...
}

三：开发中

完成以上工作后，启动测试服务，访问的页面和线上“技术题库”页面样式一致
这样就可以脱离wordpress进行本地开发
待到一定阶段，需要看最终效果时；直接build一下，再在本地环境访问“技术题库”即可

好了，可以开始接下来开发工作了！

前端笔记、