Laravel Mix 条件编译：基于 JSON 配置动态加载模块资源

本文介绍如何在 laravel mix 中根据项目根目录下的 module_statuses.json 文件动态启用或禁用模块的 javascript 编译，实现灵活、可配置的前端构建流程。

在 laravel 项目中，随着模块化程度提高，常需按需编译不同模块的前端资源（如独立 js 文件）。硬编码 .js() 调用会导致未启用模块仍参与构建，浪费时间且易引发路径错误。Laravel Mix 本身不提供内置条件编译语法，但其本质是 node.js 脚本，因此可直接利用 CommonJS 的 require() 加载本地 json 配置，并通过标准 javaScript 逻辑控制构建流程。

首先，确保你的项目根目录下存在 module_statuses.json（注意：Laravel Mix 默认运行于项目根目录，路径解析以此为基准）：

{   "Module1": true,   "Module2": true,   "Module3": false }

然后，在 webpack.mix.js 中引入该文件并编写条件逻辑。关键点在于：JSON 文件必须以 .js 扩展名或通过 require() 显式加载（node.js 支持直接 require(‘./module_statuses.json’)），但更推荐重命名为 module_statuses.js 并导出对象，以避免潜在的缓存或解析问题。不过，现代 Node.js（v14.13+）已原生支持 JSON 模块导入，因此以下写法完全可靠：

const mix = require('laravel-mix'); const tailwindcss = require('tailwindcss'); // ✅ 正确加载 JSON 配置（Node.js 自动识别 .json 后缀） const status = require('./module_statuses.json'); require('laravel-mix-merge-manifest');  mix.options({     terser: {         extractComments: false,     } });  mix.js('resources/js/app.js', 'public/js')     .vue();  // ? 动态添加模块 JS 编译任务 if (status.Module1) {     mix.js('Modules/Module1/src/Resources/assets/js/module1.js', 'public/js'); }  if (status.Module2) {     mix.js('Modules/Module2/src/Resources/assets/js/module2.js', 'public/js'); }  // 可扩展：支持 Module3 或其他任意模块 if (status.Module3) {     mix.js('Modules/Module3/src/Resources/assets/js/module3.js', 'public/js'); }  // 后续通用构建步骤（保持不变） mix.extract()     .sass('resources/sass/app.scss', 'public/css')     .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')     .options({         processCssUrls: false,         postCss: [tailwindcss('./tailwind.config.js')],     })     .version();

? 注意事项：

• require(‘./module_statuses.json’) 中的路径是相对于 webpack.mix.js 的，确保文件位于项目根目录；
• 若使用 ES Module 语法（import），需将 webpack.mix.js 改为 .mjs 并配置 “type”: “module”，但 Laravel Mix 官方推荐使用 CommonJS（.js + require），兼容性最佳；
• 修改 module_statuses.json 后，无需重启 npm run watch —— 因为每次执行 npx mix 或 npm run dev 都会重新读取该文件；
• 为提升可维护性，可封装为复用函数：

const registerModuleJs = (moduleName, srcPath) => {     if (status[moduleName]) {         mix.js(srcPath, 'public/js');     } };  registerModuleJs('Module1', 'Modules/Module1/src/Resources/assets/js/module1.js'); registerModuleJs('Module2', 'Modules/Module2/src/Resources/assets/js/module2.js'); registerModuleJs('Module3', 'Modules/Module3/src/Resources/assets/js/module3.js');

这种模式不仅适用于 .js()，还可拓展至 .sass()、.copy()、甚至 mix.webpackConfig() 的条件定制，真正实现“配置即代码”的构建治理。