求助：Yarn自定义脚本无法传递参数的实现方案咨询

问题根源 #

执行yarn dev -- --theme=clienta报错，是因为webpack本身不识别--theme这个独立选项——webpack的自定义参数需要通过--env前缀传递，直接传--theme会被当作非法选项抛出错误。

实现通用脚本的具体方案 #

1. 改造package.json脚本 #

将脚本改成无硬编码的通用结构，去掉每个client对应的单独命令：

"scripts": {
  "new": "cross-env THEME=$npm_config_theme gulp new",
  "dev": "cross-env THEME=$npm_config_theme webpack --env theme=$npm_config_theme --config webpack/dev.js --watch",
  "build": "cross-env THEME=$npm_config_theme webpack --env theme=$npm_config_theme --config webpack/build.js && gulp build --theme $npm_config_theme --type"
}

2. 安装跨平台依赖 #

先安装cross-env，保证Windows和Unix系统都能正确读取环境变量：

yarn add cross-env -D

3. 执行命令的正确方式 #

现在只需要在命令后直接传递--theme参数即可，不需要额外加--：

# 开发模式启动clienta项目
yarn dev --theme=clienta

# 构建clientb项目
yarn build --theme=clientb

# 新建clientc项目
yarn new --theme=clientc

4. 配置webpack和gulp接收参数 #

Webpack端

在webpack/dev.js和webpack/build.js里，改成函数形式接收env参数：

// webpack/dev.js示例
module.exports = (env) => {
  // 拿到传递的theme值，设置兜底默认值
  const activeTheme = env.theme || 'default';
  
  return {
    // 你的webpack配置，比如根据theme设置entry、output路径等
    entry: `./src/${activeTheme}/index.js`,
    // ...其他配置项
  };
};

Gulp端

在gulpfile.js里，用yargs读取命令行参数（先安装yargs：yarn add yargs -D），或者直接读取环境变量：

const argv = require('yargs').argv;

function build(done) {
  // 优先取命令行参数，其次取环境变量，最后兜底
  const theme = argv.theme || process.env.THEME || 'default';
  
  // 这里写入你的build逻辑，比如根据theme打包对应资源
  console.log(`Building theme: ${theme}`);
  done();
}

exports.build = build;

可选方案（无需cross-env） #

如果不想用环境变量，也可以通过--env.theme给webpack传参，同时用--把参数传给gulp：

"scripts": {
  "new": "gulp new",
  "dev": "webpack --env --config webpack/dev.js --watch",
  "build": "webpack --env --config webpack/build.js && gulp build --type"
}

执行命令时：

# 开发模式：给webpack传env参数
yarn dev --env.theme=clienta

# 构建：同时给webpack和gulp传参
yarn build --env.theme=clienta -- --theme=clienta

注意：--后面的参数只会传给脚本里最后一个命令（这里是gulp），所以webpack需要用--env.*格式传参。

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