현재 상황

// packages/shared/utils/getUser.ts
export const getUser = async () => {
  console.log(process.env.TEST_VARIABLE)
  const cookie = await chrome.cookies.get({
    name: authToken,
    url: process.env.WEB_URL!,
  });
  if (!cookie) return;

  return JSON.parse(cookie.value) as UserResponse;
};

위와 같은 전역에서 공통으로 사용할 유틸 함수가 있다. 이 유틸함수는 localhost:3000같이 환경에 따라 다르게 설정해야하는 ‘환경변수’가 존재한다.

빌드 후 파일은 다음과 같다.

// packages/shared/dist/utils/getUser.js
export const getUser = () => __async(void 0, null, function* () {
  const cookie = yield chrome.cookies.get({
    name: authToken,
    url: process.env.WEB_URL!,
  });
  if (!cookie) return;
  return JSON.parse(cookie.value);
});

환경 변수가 그대로 값이 들어간 것이다.

콘솔에 출력하면 물론 undefined가 출력이 된다.

현재 빌드 방식 분석

1. pnpm run dev입력 시, package.json의 script가 실행된다.

   // package.json
   "dev": "turbo ready && turbo watch dev --concurrency 20",
   

2. 모노레포 내 ready스크립트가 실행된다.

   // packages/shared/package.json
   "ready": "node build.mjs",
   

3. build.mjs가 실행된다.

   // packages/shared/build.mjs
   const buildOptions = {
     entryPoints: ['./index.ts', './lib/**/*.ts', './lib/**/*.tsx'],
     tsconfig: './tsconfig.json',
     bundle: false,
     target: 'es6',
     outdir: './dist',
     sourcemap: true,
   };
   
   await esbuild.build(buildOptions);
   

   • entryPoints : 진입점, 이 파일을 시작으로 빌드를 진행한다.
   • outdir : 빌드 후 파일을 생성할 폴더

해결 방법 강구

1. dotenv를 통해 빌드 과정에서 .env를 주입해주는 방법은 어떨까?

   import dotenv from 'dotenv';
   dotenv.config();
   
   export const getUser = async () => {
     console.log(process.env.TEST_VARIABLE);
     const cookie = await chrome.cookies.get({
       name: authToken,
       url: process.env.WEB_URL!,
     });
     if (!cookie) return;
   
     return JSON.parse(cookie.value) as UserResponse;
   };
   
   

   여전히 나오지 않는다.

   esbuild의 build과정에서 제거가 된 것인 듯하다.

2. 구글링. keyword : esbuild + environment variable

   • https://23life.tistory.com/entry/esbuild를-통한-번들링-시-환경변수-관리하기

     const define = {};
     
     import dotenv from 'dotenv';
     dotenv.config();
     
     for (const k in process.env) {
       define[`process.env.${k}`] = JSON.stringify(process.env[k]);
     }
     
     const buildOptions = {
     	// ..
       define,
     };
     
     await esbuild.build(buildOptions);
     
     

     위와 같이 esbuild의 build의 옵션에 define으로 환경 변수를 넘겨주면 된다.

     그리고, dotenv.config()를 통해 node로 해당 스크립트를 실행하기 전에 env파일을 주입해야한다.

     혹은 dotenv-cli를 사용하기 위해서는 dotenv node로 스크립트를 실행해도 된다.