當 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]);
}

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]);