如何从gulpfile.js向其他JavaScript文件传递非NODE_ENV变量？

嘿，这个需求我刚好折腾过，完全可以通过Webpack的内置插件搞定，而且完全不用碰NODE_ENV——毕竟NODE_ENV一般用来固定区分生产/开发环境，你要的是能从控制台灵活修改的自定义变量，这个方案刚好适配你的gulp+webpack搭配！

核心思路 #

利用Webpack内置的DefinePlugin插件，它能在编译阶段把自定义变量直接注入到你的业务JS文件里。我们只需要在gulpfile.js里读取控制台传入的参数，再把这些参数传递给Webpack的配置，就能实现「控制台输入 → gulpfile.js → Webpack → somejsfile.js」的变量流转。

步骤1：配置gulpfile.js #

首先得读取控制台传入的自定义参数，这里推荐用yargs包（npm install yargs --save-dev就能装）来简化参数解析，比手动扒process.argv省心多了。

const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream'); // 用来把webpack整合进gulp流程
const yargs = require('yargs');

// 读取控制台传入的参数，比如执行`gulp build --customVar=myValue`时，argv.customVar就是myValue
const cliArgs = yargs.argv;

// 你的webpack基础配置
const webpackConfig = {
  entry: './src/somejsfile.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      // 重点：字符串类型的变量一定要用JSON.stringify包裹！不然webpack会把它当成标识符而非字符串值
      CUSTOM_VAR: JSON.stringify(cliArgs.customVar || 'defaultValue'),
      // 布尔/数字类型的变量同理，用JSON.stringify转成webpack能识别的格式
      ENABLE_FEATURE_X: JSON.stringify(cliArgs.enableX || false)
    })
  ]
};

// 定义gulp的build任务
gulp.task('build', function() {
  return gulp.src('src/somejsfile.js')
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulp.dest('dist'));
});

步骤2：在somejsfile.js中使用变量 #

webpack编译时会自动把DefinePlugin里的变量替换成实际值，所以你可以直接在业务代码里用，完全不用额外引入：

// somejsfile.js
console.log('控制台传入的自定义变量:', CUSTOM_VAR); // 会输出你在命令行里传的值，比如"myValue"

if (ENABLE_FEATURE_X) {
  console.log('功能X已开启');
}

如何从控制台传递变量 #

运行gulp任务时，直接在命令后面追加参数就行，非常灵活：

# 传递字符串变量
gulp build --customVar=helloFromCli

# 传递布尔值参数
gulp build --enableX=true

几个关键注意点 #

• 字符串必须用JSON.stringify包裹：如果直接写CUSTOM_VAR: cliArgs.customVar，webpack会把它当作一个变量名，业务代码运行时会报错找不到这个变量，一定要记得转成字符串字面量。
• 设置默认值：给变量加个默认值，避免控制台没传参时出现undefined的情况。
• 和NODE_ENV互不干扰：这个方案完全独立于NODE_ENV，你可以继续用NODE_ENV来区分生产/开发环境，自定义变量用来处理额外的配置需求，完美契合你的场景。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD