如何在Laravel Mix中添加交互式提问并按开发者答案执行编译任务

问题原因 #

原代码无法生效是两个核心问题导致的：

• Laravel Mix 加载完 webpack.mix.js 后会自动触发编译流程，不会等待异步提问的执行结果
• 直接操作 process.stdin 绑定的 data 事件没有做销毁逻辑，多次调用提问函数会出现回调重复触发的问题，流程稳定性差

调整后可运行代码 #

const mix = require('laravel-mix');
const readline = require('readline');

// 关闭Laravel Mix默认自动执行构建的逻辑
Mix.autorun = false;

// 初始化标准输入输出接口
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// 封装提问方法
function prompt(question) {
  return new Promise((resolve) => {
    rl.question(question, (answer) => {
      resolve(answer.trim().toLowerCase());
    });
  });
}

// 主执行流程
async function init() {
  try {
    const compile_script = await prompt('Would you like to compile scripts only?[y/n] ');
    const copy_theme = await prompt('Would you like to copy theme folders? [y/n] ');
    const answers = { compile_script, copy_theme };

    /* 在这里根据answers配置你的Laravel Mix规则 */
    // 示例逻辑：
    if (answers.compile_script === 'y') {
      mix.js('resources/js/app.js', 'public/js');
    } else {
      mix.js('resources/js/app.js', 'public/js')
         .sass('resources/sass/app.scss', 'public/css');
    }
    if (answers.copy_theme === 'y') {
      mix.copyDirectory('resources/theme', 'public/theme');
    }

    // 配置完成后手动触发构建
    Mix.build();
  } catch (error) {
    console.log("流程执行出错：");
    console.log(error);
    process.exit(1);
  } finally {
    // 关闭输入输出接口
    rl.close();
  }
}

init();

注意事项 #

• 所有Mix的配置逻辑必须放在提问完成之后，不要提前写在提问函数外部，避免配置提前被Mix读取
• 如果你使用的是较老版本的Laravel Mix，Mix.autorun 配置不生效的话，可以在文件开头添加 process.env.MIX_DISABLE_AUTO_RUN = '1'，配置完成后调用 mix.dispatch('build') 触发构建即可
• 不要在提问结束后直接调用 process.exit()，会中断还没执行的构建流程

内容的提问来源于stack exchange，提问作者ronaldtgi