在源代码中使用 NODE_ENV 来控制 Webpack 的构建过程 [英] Use NODE_ENV in source code to control build process with Webpack

问题描述

我正在设置 Redux DevTools (https://www.npmjs.com/package/redux-devtools) 在我的项目中，并希望在构建我的生产项目时排除 DevTools.文档说这可以通过使用以下代码来完成:

I am setting up Redux DevTools (https://www.npmjs.com/package/redux-devtools) in my project and want to exclude the DevTools when building my project for production. The documentation says that this can be accomplished by using this code:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

我已经有一个带有常量的模块，所以我已经在那里检查了 NODE_ENV.

I already have a module with constants so I have put the checking for the NODE_ENV in there.

Constants.PRODUCTION = process.env.NODE_ENV === 'production'

在我的 Webpack 配置文件中，我有以下代码可以正常工作:

In my Webpack config file I have the following code that works like it should:

const production = process.env.NODE_ENV === 'production'

var config = {
  // configuration goes here
}

if (production) {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ].concat(config.plugins)
}

当运行 set NODE_ENV=production&&webpack 时，构建会被缩小，仅使用 webpack 不会缩小构建.但是，在源代码本身中，NODE_ENV 是未定义的:

When running set NODE_ENV=production&&webpack the build get's minified and using just webpack dosen't minify the build. However, in the source code itself the NODE_ENV is undefined:

console.log(process.env.NODE_ENV) // Output: Undefined

如果我将 Constants.PRODUCTION 设置为 true，那么 DevTools 不会包含在构建中.不知何故，我应该使用 DefinePlugin 或 ProvidePlugin(Redux DevTools 文档提到了它们，但在不同的地方)，但我不知道如何使用.我正在使用 Windows 10、DevTools 3.0.0 和 npm 脚本来运行构建过程.任何人都可以帮助我如何在我的 webpack 配置文件中设置 DefinePlugin 或 ProvidePlugin 吗?

If I set my Constants.PRODUCTION to true then DevTools is not included in the build. Somehow I am supposed to use DefinePlugin or ProvidePlugin (the Redux DevTools documentation mention them both but on different places), but I can't figure out how. I am using Windows 10, DevTools 3.0.0 and npm scripts to run the build process. Can anyone help me with how I'm supposed to set up DefinePlugin or ProvidePlugin in my webpack config file?

推荐答案

我自己解决的；在 webpack 配置文件中，我添加了这个:

I solved it by myself; in the webpack config file I added this:

plugins: [
  // Some other plugins
  new webpack.DefinePlugin({
      PRODUCTION: production,
  })
]

我将常量模块中的代码更改为

I changed the code in my Constants module to

Constants.PRODUCTION = PRODUCTION

这行得通.现在，当运行我的 npm 脚本时，我得到了一个没有模块的构建，因为它在 uglifying 期间被完全删除，我可以像以前一样启动 webpack 开发服务器，然后我加载了 Redux DevTools:

and that works. Now when running my npm scripts I got one build without the modules since that is removed completely during uglifying and I can start webpack dev server as before and then I have Redux DevTools loaded:

"scripts": {
  "start": "set NODE_ENV=development&&webpack-dev-server",
  "build": "set NODE_ENV=production&&webpack --progress --colors"
}

问题中的第一个代码片段现在看起来像这样:

The first code snippet in the question now looks like this:

if (Constants.PRODUCTION) {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

这篇关于在源代码中使用 NODE_ENV 来控制 Webpack 的构建过程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！