javascript - 打包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=生产 webpack-dev-server [选项]

例如，您可能只有一个用于开发的 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 是否为 生产，因此，如果您根本不定义 NODE_ENV，则默认为开发值，在开发过程中删除另一个命令行选项。使用此配置，您可以运行以下代码进行开发:

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

对于生产，您只需添加 NODE_ENV=product 和 -p:

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

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

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