打包运行多个环境变量的json脚本

Question

在我的package.json 中，我正在运行这样的脚本：

"build-dev": "webpack-dev-server --content-base src --inline --hot -p --define process.env.NODE_ENV='\"dev\"' --progress --colors -p --define process.env.REACT_APP_GAMESHOW_URL='\"http://api.gameshow.com/contestants\"' --progress --colors"

而且有效。

基本上我只是想运行 webpack 并定义一些环境变量：

webpack-dev-server --content-base src --inline --hot

process.env.NODE_ENV=dev

process.env.REACT_APP_GAMESHOW_URL=http://api.gameshow.com/contestants

但是，我多次使用这些参数：-p --define --progress --colors

有没有办法可以压缩代码使其不重复？

类似：

-p --define process.env.NODE_ENV='\"dev\"' && process.env.REACT_APP_GAMESHOW_URL='\"http://api.gameshow.com/contestants\"' --progress --colors"

我尝试了很多东西，但它们都不起作用

Answer 1

重复像--progress 和--colors 这样的标志没有任何作用，就像你只使用过一次一样。 --define 选项可以多次使用以定义多个值，并且完全独立于您使用的任何其他标志/选项。

您可以在 webpack 配置中定义这些选项，而不是使用命令行选项。等效的DefinePlugin 是：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('dev'),
      REACT_APP_GAMESHOW_URL: JSON.stringify('http://api.gameshow.com/contestants'),
    }
  })
]

由于它只是 JavaScript，这也允许您使用 JSON.stringify() 摆脱繁琐的转义和在引号内​​使用引号。根据您的环境，可以通过多种方式更改这些值。

• 您使用--config path/to/config.js 指定的单独配置
• Exporting a function to use --env
• 环境变量，例如NODE_ENV=production webpack-dev-server [options]

例如，您可能只有一个用于开发的 URL 和一个用于生产的 URL，因此您可以按照以下方式进行操作：

const isProd = process.env.NODE_ENV === 'production';
const env = isProd ? 'production' : 'dev';
const url = isProd ? 'http://api.gameshow.com/contestants' : 'http://localhost:3000/contestants';

module.exports = {
  // Rest of your config

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(env),
        REACT_APP_GAMESHOW_URL: JSON.stringify(url),
      }
    })
  ]
};

注意它总是检查NODE_ENV 是否为production，所以如果你根本没有定义NODE_ENV，你默认使用开发值，在开发过程中删除另一个命令行选项。使用此配置，您可以运行以下代码进行开发：

webpack-dev-server --content-base src --inline --hot --progress --colors

而对于生产，您只需要添加NODE_ENV=production 和-p：

NODE_ENV=production webpack-dev-server -p --content-base src --inline --hot --progress --colors

不要在开发中使用-p，这是生产标志，在开发中使用绝对没有帮助。请参阅Building for Production 了解更多信息。

如果您愿意，还可以配置您当前在命令行中指定的其他选项，例如stats.colors 或devServer.contentBase。