包運行多個環境變量的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指定的單獨配置
• 導出功能以使用--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 ，這是生產標記，絕對不能在開發中使用。 有關更多信息，請參見生產生產 。

如果願意，還可以配置當前在命令行上指定的其他選項，例如stats.colors或devServer.contentBase 。