Question

经过尝试，我发现webpack.definePlugin和从npm脚本传递的环境变量的效果是相同的。为什么需要definePlugin？

Answer 1

嗯，在某些情况下，在代码中广泛使用env变量会很冗长或不安全。

示例一：添加更多逻辑

NODE_ENV=production webpack ...

使用DefinePlugin，您可以定义

__PRODUCTION__: process.env === 'production'

然后在代码中，您可以使用__PRODUCTION__代替在代码中反复编写process.env === 'production'。

示例2：提供后备支持

__ENV__: process.env || 'development'

然后，使用__ENV__以外的process.env会减少意外。

您也可以定义其他不受限制的变量。

Answer 2

因为您可能只想设置一个没有env var的全局es6变量，例如当你有一个环境变量和一个具有相同名称但目的不同的全局时。

Answer 3

典型案例：

您无法直接在客户端代码中使用/** * @var string */ public $name = NULL; /** * @var string */ public $description = NULL;。

因为它是process.env.NODE_ENV代码。

但是，许多客户端代码，特别是nodejs库。

他们会为third-party提供一些代码，例如development，warning等等。

喜欢：

log

但在制作中，您不希望在if(process.env.NODE_ENV === 'development') { makeWarinig(); }中使用这些代码。因此，您可以通过bundle.js告诉library。

NODE_ENV=production会将webpack.DefinePlugin替换为process.env.NODE_ENV中定义的webpack.config.js。

喜欢：nodejs cli将环境变量传递给webpack.config.js，webpack将变量传递给客户端代码到DefinePlugin。

Answer 4

通常在我们的项目中，我们使用新的webpack.DefinePlugin来定义可以在客户端全局使用的全局值。

if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
      new webpack.DefinePlugin({
       'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
       }
      }),
      new webpack.optimize.UglifyJsPlugin()
    )
 }

两个process.env.NODE_ENV看起来相同但实际上不同。第一个是在package.json中定义的。它看起来像：

"scripts": {
  "build": "NODE_ENV='production' webpack -p"
},

它在节点服务器端定义NODE_ENV ='production'。它可以在webpack中访问，但不能在客户端访问。所以在webpack.config.js中我们需要重新定义它，以便我们可以在我们的客户端使用它。

definePlugin和env变量有什么区别？

4 个答案: