Laravel Mix 中基于 JSON 配置实现模块化条件编译教程_技术教程

本文介绍如何在 laravel mix 的 `webpack.mix.js` 中动态读取项目根目录的 `module_statuses.json` 文件，并根据其中的布尔值开关，条件性地注册 javascript 模块编译任务。

在 Laravel 项目中，随着功能模块增多，常需按需启用或禁用特定模块的前端资源构建（如 JS、CSS）。Laravel Mix 本身不提供内置的条件编译语法，但得益于其基于 Node.js 运行的特性，我们可直接在 webpack.mix.js 中使用原生 Node.js 能力（如 require()）加载配置文件，从而实现灵活的条件逻辑。

✅ 步骤详解

准备配置文件
在项目根目录创建 module_statuses.json（注意：文件名需与 require() 中路径一致）：
```
{
    "Module1": true,
    "Module2": true,
    "Module3": false
}
```

修改 webpack.mix.js 实现条件加载
使用 require('./module_statuses') 直接导入 JSON 文件（Node.js 原生支持），然后通过属性访问判断状态，并包裹 .js() 构建链：

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
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 为 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();

⚠️ 注意事项

✅ JSON 文件路径必须正确：require('./module_statuses') 默认查找同级目录下的 module_statuses.json（Node.js 会自动补全 .json 后缀）；若改名（如 config/modules.json），请同步更新路径。
✅ 确保 JSON 格式合法：任何语法错误（如末尾逗号、单引号）将导致 mix 命令启动失败，报错类似 SyntaxError: Unexpected token } in JSON。
✅ 模块路径需真实存在：条件启用后，对应 JS 文件路径必须有效，否则 npm run dev 会抛出 Entry module not found 错误。
✅ 避免链式中断：.js() 等方法返回 mix 实例，因此每个 if 块内应独立调用，不可写成 mix.js(...).js(...) 形式嵌套——因条件分支可能跳过中间步骤，破坏链式调用完整性。

? 扩展建议

若模块数量较多，可用循环替代重复 if：

Object.entries(status).forEach(([name, enabled]) => {
    if (enabled && name.startsWith('Module')) {
        const path = `Modules/${name}/src/Resources/assets/js/${name.toLowerCase()}.js`;
        mix.js(path, 'public/js');
    }
});