React JS在生产环境下如何去除测试代码？

Question

在我的React函数式组件中，我使用useEffect进行一些调试日志记录，但我只想在非--production构建时使用它。

// something like
if (process.env.NODE_ENV !== 'production') {
  // I want the contents of this block removed on production builds, but it is inside a function
  useEffect(() => {
    console.log("authState changed", AuthStates[authState]);
  }, [authState]);

  useEffect(() => {
    console.log("authToken changed", authToken);
    if (tokenExpiresOn) {
      console.log(
        `token expires in ${(tokenExpiresOn - Date.now()).toLocaleString()}ms`
      );
    }
  }, [authToken]);

  useEffect(() => {
    if (tokenExpiresOn) {
      console.log(
        `token expires in ${(tokenExpiresOn - Date.now()).toLocaleString()}ms`
      );
    } else {
      console.log("tokenExpiresOn cleared");
    }
  }, [tokenExpiresOn]);
}

- Archimedes Trajano

---

看起来这是使用自定义钩子的一个很好的案例。 - charlietfl

Answer 1

您不能有条件地声明钩子。您可以在顶层声明，也可以在钩子内部放置业务逻辑，例如下面的示例。

useEffect(() => {
   if (process.env.NODE_ENV !== 'production'){
    console.log("authToken changed", authToken);
    if (tokenExpiresOn) {
      console.log(
        `token expires in ${(tokenExpiresOn - Date.now()).toLocaleString()}ms`
      );
    }
 }
  }, [authToken]);

- Sam

---

但它是否会从缩小的代码中剥离它呢？因为它永远不会到达那个路径？ - Archimedes Trajano

@ArchimedesTrajano，它将成为代码的一部分，但只有当它符合条件时才会执行。 - Sam

好的，我的问题是要确保它从缩小的输出中被剥离。 - Archimedes Trajano

请查看此线程 https://dev59.com/cF4b5IYBdhLWcg3w5VI9 - Sam

有没有具体的指导说明可以告诉我们如何将它与ReactJS构建集成？ - Archimedes Trajano