reactjs - 我可以仅使用 webpack 将代码块标记为生产或开发吗？

Question

我正在构建 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 构建之前放置一个预处理器，该预处理器将复制没有标记的“仅限开发”部分的代码，但会向进程添加整个其他层。

Answer 1

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

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