package json script 运行多个环境变量

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 选项可以多次使用以定义多个值，并且完全独立于您使用的任何其他 flag/option。

您可以在 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 用于开发，一个用于生产，因此您可以按照以下方式做一些事情：

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，那是生产标志，在开发中使用绝对没有帮助。请参阅构建生产获取更多信息。

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

package json script 运行多个环境变量

package json script running multiple environment variables

javascript

scripting

webpack

package.json

package json script 运行 多个环境变量

package json script running multiple environment variables

javascript

scripting

webpack

package.json

package json script 运行多个环境变量