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.李括
请先 登录 后评论
  • 2 关注
  • 0 收藏,1487 浏览
  • NPC.李括 提出于 2024-05-28 14:41