Laravel Mix 中基于 JSON 配置的条件编译实践

本文介绍如何在 laravel mix 的 `webpack.mix.js` 中动态读取项目根目录下的 `module_statuses.json` 文件，并根据其中的布尔值决定是否编译指定模块的 js 资源，实现灵活、可配置的前端构建流程。

在 Laravel 项目中，随着模块化程度提高，常需按需启用或禁用特定功能模块的前端资源编译。Laravel Mix 本身不支持运行时条件判断，但借助 Node.js 原生能力（如 require() 加载 JSON 文件），我们可以在 webpack.mix.js 中实现逻辑分支控制。

✅ 实现步骤

1. 确保 JSON 文件格式正确
   将 module_statuses.json 放置于项目根目录（与 webpack.mix.js 同级），内容示例如下：

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

   ⚠️ 注意：JSON 文件必须严格符合语法规范（无注释、双引号包裹键名和字符串值），否则 require() 会抛出解析错误。

2. 在 webpack.mix.js 中加载并使用配置
   使用 require('./module_statuses') 直接导入 JSON（Node.js 内置支持），然后通过 if 判断各模块开关状态，仅对 true 的模块调用 .js() 方法：

   const mix = require('laravel-mix');
   const tailwindcss = require('tailwindcss');
   const status = require('./module_statuses'); // ✅ 自动解析为 JS 对象
   require('laravel-mix-merge-manifest');
   
   mix.options({
       terser: {
           extractComments: false,
       }
   });
   
   mix.js('resources/js/app.js', 'public/js')
       .vue();
   
   // ? 条件编译：仅当对应模块启用时才加入构建流程
   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（当前为 false，将被跳过）
   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();

? 进阶提示

• 路径健壮性：若 module_statuses.json 位置变动，建议改用 path.join(__dirname, 'module_statuses.json') + fs.readFileSync + JSON.parse 方式加载，避免 require() 的缓存机制导致配置未实时更新（开发阶段可加 delete require.cache[require.resolve('./module_statuses')] 强制刷新）。
• 错误处理：生产环境建议包裹 try/catch，防止 JSON 解析失败导致整个 Mix 构建中断：

  let status;
  try {
      status = require('./module_statuses');
  } catch (e) {
      console.error('❌ Failed to load module_statuses.json:', e.message);
      throw e;
  }

• 与环境变量协同：可结合 process.env.NODE_ENV 或自定义环境变量（如 MIX_MODULE_PROFILE=staging）实现多环境差异化配置。

通过该方式，你无需修改构建脚本即可通过调整 JSON 配置快速启停模块资源，显著提升团队协作效率与 CI/CD 流程的灵活性。