本文介绍如何在 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() 的条件定制，真正实现“配置即代码”的构建治理。
