代码之家 › 专栏 › 技术社区 › zanerock

我可以只使用webpack将代码块标记为生产或开发吗?

webpack reactjs

zanerock · 技术社区 · 6 年前

我正在构建react组件,为了使我的代码对开发人员更友好,我将包括以下内容:

componentDidMount() {
  setTimeout(() => {
    if (!this.props.setupComplete) 
      console.warn("ComponentX might be stuck. This may mean you forget such and such.");
  }, setupCheckDelay);
}

其目的是帮助开发人员更快地找出常见错误。是否有方法标记此代码以告诉Webpack将其简单地排除在生产构建之外?或者只包含在开发构建中?例如,我想要像这样的东西:

// build-hint-development-only
... my checking code
// end-build-hint

这样在生产构建中,代码就完全被忽略了。我的目标是减少最终代码的大小(而不是简单地避免执行)。

我在网上搜索了一下,但什么也没找到。我想我可以使用动态导入+环境变量,然后重新安排代码,这样开发检查就完成了,包装器hoc或者一些从来没有包含在开发构建中的东西,但是对于一些非常简单的东西来说,这似乎是脆弱和复杂的。另一个选择是在webpack构建之前放置一个预处理器,该预处理器将生成代码的副本,而不带标记的“仅开发”部分,但会将整个其他层添加到进程中。

2 回复 | 直到 6 年前

matthiasgiger 5 年前

这个 process.env.NODE_ENV 变量将由webpack根据当前模式设置。像这样使用:

if (process.env.NODE_ENV === 'production') {
  // Code will only appear in production build.
}

if (process.env.NODE_ENV !== 'production') {
  // Code will be removed from production build.
  console.log("Looks like you're a developer.");
}

文档: webpack - Production

Alexander Kuzmin 6 年前

您可以使用环境变量。

componentDidMount() {
  setTimeout(() => {
    if (process.NODE_ENV !== 'production') 
     console.warn("ComponentX might be stuck. This may mean you forget such and such.");
   }, setupCheckDelay);
  }

https://webpack.js.org/guides/environment-variables/