60 如何根据环境参数实现导入不同文件(import)

我在写一个 NextJS 项目,开发环境和生产环境需要导入不同的文件,如何能写一个文件,根据环境参数,导入对应的文件?

比如,
process.env.NEXT_PUBLIC_TESTNET === 'true',
代码中实现import { XXX, XXX } from '../generated_dev'
而当process.env.NEXT_PUBLIC_TESTNET === 'false'
代码中则import { XXX, XXX } from '../generated'.

请先 登录 后评论

最佳答案 2024-11-21 14:19

步骤 1: 设置环境变量

# .env.local (用于开发环境)
NEXT_PUBLIC_TESTNET=true

# .env.production (用于生产环境)
NEXT_PUBLIC_TESTNET=false

步骤 2: 动态导入文件

import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [module, setModule] = useState(null);

  useEffect(() => {
    const loadModule = async () => {
      let importedModule;
      if (process.env.NEXT_PUBLIC_TESTNET === 'true') {
        importedModule = await import('../generated_dev');
      } else {
        importedModule = await import('../generated');
      }
      setModule(importedModule);
    };

    loadModule();
  }, []);

  if (!module) {
    return <div>Loading...</div>;
  }

  const { XXX, YYY } = module;

  return (
    <div>
      <XXX />
      <YYY />
    </div>
  );
};

export default MyComponent;

请先 登录 后评论

其它 1 个回答

NPC.李括

根据 chatGPT 的回答,我觉得应该是无法做到。介于 Wade 大佬一直在回答,虽然没有达到我需要的效果,但是这题的学分,就给他了。

如果后面有谁可以回答这个问题,可以私信我,我可以新建问题, 把学分给他。

请先 登录 后评论
  • 2 关注
  • 0 收藏,1706 浏览
  • NPC.李括 提出于 2024-05-28 14:41