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。

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

1 个答案: