Razzle 插件 razzle-plugin-php 实战在 Universal React 应用中用 Babel 编译 PHP 代码【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址: https://gitcode.com/gh_mirrors/ra/razzlerazzle-plugin-php 是 Razzle 官方仓库packages/razzle-plugin-php中的一个特殊插件它通过babel-preset-php让 Razzle 的 Webpack 构建管线直接识别并编译.php文件把 PHP 源码当作一种类 JavaScript语言转译成可在服务端渲染链路中运行的模块。本文结合插件源码、插件加载机制与版本演进记录CHANGELOG.md完整讲解它的安装配置、底层四个 Webpack 改造步骤以及适用边界——读完你既能照例配置也能理解 Razzle 插件体系的工作方式。这个插件是什么一句玩笑但真的能跑官方 READMEpackages/razzle-plugin-php/README.md开宗明义Razzle plugin to addbabel-preset-php.并在说明中直言 Note this is kind of a joke, but actually works.这有点像个玩笑但它确实能工作。它的技术本质是借用 babel-preset-php 这个 Babel 预设把 PHP 语法?php、$var、function、echo等解析并转译为 JavaScript从而让以 JavaScript 为中心的 Razzle 构建流程也能打包 PHP 编写的模块。它不搭建 PHP 运行时也不执行服务端 PHP 进程而是一次源码级翻译——这是理解本插件一切行为的前提。安装与配置两行代码接入 Razzle 插件体系按照 README.md 的步骤先安装插件yarn add razzle-plugin-php --dev然后在项目根目录的razzle.config.js中注册// razzle.config.js module.exports { plugins: [php], };关键点在于plugins数组里填的是短名php而不是完整的包名。Razzle 的插件加载器会在node_modules中按一套命名规则自动解析对应关系见 packages/razzle/config/loadPlugins.jsrazzle-plugin-php短名拼上razzle-plugin-前缀若短名带作用域如scope/php还会依次尝试scope/razzle-plugin-php、原样包名也支持php/razzle-plugin这类子路径形式的包。loadPlugin同时兼容多种声明形式纯字符串无选项默认应用、函数、带object/funcoptions的测试用对象等loadPlugins.js。因此如果你需要给插件传选项也可以写成plugins: [{ name: php, options: { ... } }]的形式——不过本插件当前实现不接受任何选项直接用字符串声明即可。源码拆解modifyWebpackConfig 的四步改造插件只有一个入口即modifyWebpackConfig钩子packages/razzle-plugin-php/index.js。Razzle 在构建配置生成阶段会调用每个插件的该钩子调用点见 packages/razzle/config/createConfigAsync.js并传入{ webpackConfig, ... }对象插件返回修改后的配置。整个改造分四步第一步把.php加入模块解析扩展名config.resolve.extensions.push(.php);这样import foo from ./foo.php甚至省略扩展名的import ./foo都能被 Webpack 解析命中 PHP 文件。注意 Razzle 默认的 extensions 列表会先尝试无扩展名、.js等.php追加在末尾因此不会干扰既有 JS 模块解析。第二步从 file-loader 中排除 PHP 文件config.module.rules[ config.module.rules.findIndex(makeLoaderFinder(file-loader)) ].exclude.push(/\.(php)$/);Razzle 默认的 asset 处理规则里file-loader 会接管未知/静态资源。如果 PHP 文件被 file-loader 命中就会作为静态资源直接拷贝而不会被转译。这里通过makeLoaderFinder(file-loader)定位到 file-loader 所在规则再把/\.(php)$/追加进该规则的exclude保证 PHP 文件进入 Babel 转译路径。makeLoaderFinder来自 packages/razzle-dev-utils/makeLoaderFinder.js它构造一个匹配 loader 名形如/file-loader/的路径片段的正则同时兼容rule.loader字符串形式与rule.use数组形式是 Razzle 插件体系中定位规则的标准工具。第三步把 PHP 加入 noParse阻止按 JS 解析config.module.noParse config.module.noParse ? config.module.noParse.concat([/.php$/]) : [/.php$/];Webpack 的noParse会跳过对匹配模块的解析不分析依赖图、不按 JS 语法解析。因为 PHP 文件本就不是合法 JS若被当作 JS 预解析会在编译早期直接报语法错误。这一步与第二步配合确保 PHP 文件只走 Babel 转译这一条路。第四步追加针对.php的独立 Babel 规则config.module.rules.push({ test: /\.php$/, include: config.module.rules.find(makeLoaderFinder(babel-loader)).include, use: [ { loader: babel-loader, options: { presets: [require.resolve(babel-preset-php)], babelrc: false, }, }, ], });这是插件的核心它新建一条 Webpack ruletest: /\.php$/匹配 PHP 文件include复用 Razzle 原有 babel-loader 规则的 include 范围即src目录等use里通过require.resolve(babel-preset-php)显式解析出预设的绝对路径避免解析歧义。babelrc: false禁止读取项目.babelrc防止用户 Babel 配置干扰 PHP 转译——同时这也意味着该规则只做 PHP→JS 转译不做 React/JSX 等常规预设的二次处理。依赖关系上插件在 packages/razzle-plugin-php/package.json 中声明了babel-preset-php: ^1.2.0作为运行时依赖并将razzle与razzle-dev-utils4.2.18列为 peerDependencies——后者正是makeLoaderFinder的来源这也是插件运行的前提条件。版本演进从 CHANGELOG 看插件的维护轨迹packages/razzle-plugin-php/CHANGELOG.md 记录了该插件随 Razzle 4.2.x 的历次发布4.2.18支持type: module的razzle.config.jsESM 配置入口并同步更新razzle、razzle-dev-utils至 4.2.184.2.17移除文件中未使用的jest与chalk依赖引用同时引入 changesets 发布流程并同步更新依赖至 4.2.174.2.16接入 changesetsmonorepo 变更集体系与razzle4.2.16、razzle-dev-utils4.2.16对齐发布。可以推断该插件在 4.2.16 之前即已存在4.2.16 只是接入变更集工具此后每次发布都与核心razzle包保持同版本号对齐。这也提示使用者升级 Razzle 主版本时应让插件版本与razzle版本保持一致避免 peerDependency 校验不通过。使用边界与注意事项转译质量依赖 babel-preset-php 的能力PHP 与 JS 语义差异较大类型系统、对象模型、内置函数等babel-preset-php只覆盖常见语法子集复杂 PHP 代码如大量原生函数、类继承、命名空间可能无法正确转译使用前务必在目标代码上验证不要混入需要常规 Babel 预处理的语法该规则babelrc: false且只加载babel-preset-php不会经过项目自身的 Babel 预设链文件位置include复用了 babel-loader 的 include 范围PHP 模块应放在src等被 include 的目录内否则规则不会命中静态资源冲突插件已通过exclude将 PHP 从 file-loader 剔除无需额外处理但如果你自定义过 file-loader 规则需确认该排除逻辑仍然生效。整体来看razzle-plugin-php 是理解 Razzle 插件机制的一个极佳范例短短 30 余行modifyWebpackConfig实现展示了如何用makeLoaderFinder精准定位既有规则、如何通过noParse 独立 Babel rule 引入全新语言支持。尽管它定位偏趣味实验但其插件编写范式扩展名注册 → 排除冲突 loader → noParse → 新增 rule可直接迁移到任何给 Razzle 加一种新语法/新语言的真实场景。【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址: https://gitcode.com/gh_mirrors/ra/razzle创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
5步搞懂 xlsxwriter 底层原理 新手必备速查手册 5步搞懂 xlsxwriter 底层原理 新手必备速查手册 刚学会 Python 语法，面对 Excel 需求却不知如何下手？别慌，这份 xlsxwriter 速查手册直接带你拆解底层逻辑，解决“懂语法但不会搭项目”的痛点。… · 2026/9/23 12:29:48
码农新手别瞎学，这份保姆级教程讲透底层逻辑 码农新手别瞎学，这份保姆级教程讲透底层逻辑 看了一堆视频，敲过几百行代码，为什么一到写真实项目就大脑一片空白？这是无数刚入行或准备入行的码农最崩溃的时刻。你觉得自己懂了语法，但面对需求时却连数据结构都选不对。别急，这篇保姆级教程不教你怎么调… · 2026/9/23 12:29:35
手机检测数据集实战：YOLO格式与VOC转换、训练避坑全解析 简介：面向YOLO系列算法实战的“手机—玩手机—打电话”目标检测数据集，共593张带标签图像，已按训练与验证需求划分好目录，可直接用于yolov5、yolov7、yolov8、yolov9、yolov10、yolo11等模型的训练和测试，省去手动划分… · 2026/9/23 12:29:28
SQL编程从入门到精通：核心语法、性能优化与实战避坑指南 1. 为什么SQL值得每个开发者认真对待刚入行那会儿，我对SQL的态度就是"能查出来就行"。直到有一次线上事故，一条看似简单的关联查询把数据库CPU打到90%以上，整个服务响应时间从50ms飙到3秒，我才真正意识到：SQ… · 2026/9/23 13:12:20
新手避坑：超额存款准备金计算错3处，面试被问懵 新手避坑：超额存款准备金计算错3处，面试被问懵 看了一堆教程还是不会写项目？很多新手卡在金融计算和代码落地的断层上。今天讲超额存款准备金，这是银行面试高频题，也是业务开发容易踩的坑。 坑的现象：算出的数字对不上报表… · 2026/9/23 13:12:13
3分钟搞懂极大似然法：图解原理+Python避坑指南 3分钟搞懂极大似然法：图解原理+Python避坑指南 是不是又遇到那种“代码看着眼熟，一跑就报错，改了两小时还是红屏”的崩溃瞬间？别慌，这太正常了。很多人卡在概率论这块，不是数学不好，而是没把 极大似然法 的 图解原理… · 2026/9/23 13:12:12
3个核心误区让你Scrum面试翻车，这份指南救你 3个核心误区让你Scrum面试翻车，这份指南救你 刚拿到offer的应届生，最怕的不是技术不会，而是复制来的代码跑不通。 面试官问：“你项目里Scrum怎么做？”你背了一堆定义，结果对方追问：“Sprint Review里谁发言？”… · 2026/9/23 13:12:05
PredictionIO 批量持久化评估器实战：用 `pio eval` 为一组查询批量产出推荐预测结果 PredictionIO 批量持久化评估器实战：用 pio eval 为一组查询批量产出推荐预测结果 【免费下载链接】predictionio PredictionIO, a machine learning server for developers and ML engineers. 项目地址: https://gitcode.com/gh_mirrors/pred/predictionio 本… · 2026/9/23 13:12:05
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
