[React, JS, TS] 간결한 import를 위한 index(barrel) 파일을 자동으로 생성해보자

📒 JavaScript, Barrel 파일

---

자바스크립트에서 특정 디렉토리 내의 여러 모듈을 하나의 파일에서 re-export 함으로써

다른 파일에서 간결한 import문을 사용할 수 있게 하는 index 파일을 Barrel 파일이라고 합니다.

 

처음엔 Barrel이란 명칭을 몰라 그냥 인덱싱한다고 하며 1년 동안 검색도 제대로 못했었는데,

최근 아티클을 보다 이러한 index 파일을 Barrel이라 한다는 것을 보곤 속이 시원해졌습니다.

 

뭐 어쨌든 다들 아시겠지만 다음 코드들은 주로 index.js, index.ts로 사용되는 Barrel 파일의 일반적인 예시입니다.

//barrel 적용 전
import { ModuleA } from 'utils/ModduleA';
import { ModuleB } from 'utils/ModduleB';
import { ModuleC } from 'utils/ModduleC';

위와 같이 파일당 한줄 씩 늘어났던 import문에 아래와 같은 Barrel 파일을 적용하면 다음과 같습니다.

// utils/index.ts
export { default as ModuleA } from './ModuleA';
export { default as ModuleB } from './ModuleB';
export { default as ModuleC } from './ModuleC';

// barrel 적용 후
import { ModuleA, ModuleB, ModuleC } from 'utils';

---

📌 너무나 귀찮은 Barrel 파일 작성

코드 라인이 길어지는걸 너무나 싫어하는 저에게 Barrel 파일은 가뭄에 단 비 같은 존재였으나,

문제는 파일이 추가되거나 삭제되면 그거에 대항해 Barrel 파일을 일일이 수작업으로 수정해주어야 했고,

이전에 모르고 추가하지 않았던 파일은 또 어딘가 한 줄의 import 라인이 되어 저를 괴롭혔습니다.

 

그러다 어느날 문득 Node.js의 fs 모듈을 이용한다면 단 한 줄의 터미널 명령어로

Barrel 파일을 자동화할 수 있겠다는 생각이 스쳐 지나갔습니다.

---

📌 Barrel 파일 자동화 스크립트

GitHub - LasBe-code/generate-barrel-file: JavaScript, TypeScript에서 index(barrel) 파일을 자동으로 생성해주는 스

배럴 파일 자동 생성 스크립트 적용 예제는 제 깃허브에 올려놨으니 참고해 주세요.

---

const fs = require('fs');

JavaScript의 fs 모듈은 Node.js의 핵심 모듈 중 하나로,

파일 시스템에 접근하여 파일을 읽고, 쓰고, 수정하고, 삭제하는 등의 작업을 수행할 수 있게 해 줍니다.

 

그리고 이를 이용한다면 현재 프로젝트의 디렉토리를 읽고 분석해

재귀적으로 폴더의 폴더를 파고 들어가 Barrel 파일을 생성할 수 있겠다 생각했고,

chatGPT의 도움을 받아 다음과 같은 코드를 완성시켰습니다.

 

여기서 직접 사용하실 때는 다음 3가지만 직접 수정해 주시면 됩니다.

1. 확장자 명 변경을 위한 isJavaScript 변수 수정
2. Barrel 파일을 생성할 디렉토리 목록
3. Barrel 파일에서 export 하지 않을 예외 파일 이름 목록

const fs = require('fs'); // 파일 시스템 모듈 사용
const path = require('path'); // 경로 관련 모듈 사용

// 소스 코드 디렉토리 경로 설정
const srcFolderPath = path.join(__dirname, 'src');
let count = 0;

// (직접 수정) index.js = true, index.ts = false
const isJavaScript = false;
const extension = isJavaScript ? 'js' : 'ts';

// (직접 수정) 처리 대상 디렉토리 목록
const targetFolderList = ['apis', 'components', 'constants', 'hooks', 'pages', 'states'];

// (직접 수정) 예외 파일 목록
const exceptionFileList = ['exception'];

targetFolderList.forEach((folder) => {
  const folderPath = path.join(srcFolderPath, folder); // 대상 폴더의 전체 경로 생성
  if (fs.existsSync(folderPath) && fs.statSync(folderPath).isDirectory()) {
    generateIndexFile(folderPath); // 대상 폴더에서 index.js(ts) 파일 생성 함수 호출
  }
});

// 지정된 디렉토리 내의 파일들을 기반으로 index.js(ts) 파일을 생성하는 함수
function generateIndexFile(directoryPath) {
  // 현재 디렉토리 내의 index.js(ts) 파일 경로 생성
  const indexFilePath = path.join(directoryPath, `index.${extension}`);

  // 현재 스크립트 파일과의 상대 경로 계산
  const relativePath = path.relative(__dirname, indexFilePath);

  const files = fs.readdirSync(directoryPath); // 디렉토리 내의 파일 목록을 읽어옴

  const exportStatementList = []; // export 구문을 담을 배열

  files.forEach((file) => {
    // 파일의 전체 경로 생성
    const filePath = path.join(directoryPath, file);

    // 확장자를 제외한 파일 이름 추출
    const fileNameWithoutExtension = path.basename(file, path.extname(file));

    // 예외 파일 목록에 포함되는지 확인
    const isException = exceptionFileList.some((exceptionFileName) =>
      exceptionFileName.toLowerCase().includes(fileNameWithoutExtension.toLowerCase()),
    );

    if (isException) return; // 예외 파일인 경우, 다음 파일로 넘어감

    if (
      fs.statSync(filePath).isFile() &&
      (file.endsWith(`.${extension}`) || file.endsWith(`.${extension}x`)) &&
      file !== `index.${extension}`
    ) {
      // 파일이 존재하고 확장자가 .js(ts) 또는 .jsx(tsx)이며, 파일 이름이 index.js(ts)가 아닌 경우
      exportStatementList.push(`export * from './${fileNameWithoutExtension}';`);
    } else if (fs.statSync(filePath).isDirectory() && file !== `index.${extension}`) {
      // 디렉토리인 경우, 파일 이름이 index.js(ts)가 아닌 경우
      exportStatementList.push(`export * from './${fileNameWithoutExtension}';`);
      generateIndexFile(filePath); // 재귀적으로 하위 디렉토리 처리
    }
  });

  const content = exportStatementList.join('\n'); // export 구문을 줄 바꿈으로 연결하여 내용 생성
  fs.writeFileSync(indexFilePath, content); // 생성된 내용을 index.js(ts) 파일에 쓰기

  console.log(`${++count} ${`\t`} ${relativePath}`);
}

---

🔎 사용 방법

위와 같이 프로젝트 root 경로에 해당 파일을 생성해 줍니다.

 

그다음 package.json 파일의 scripts 부분에 node로 해당 파일을 실행시키는 명령어를 지정해 준 뒤,
$ npm run barrel 을 터미널에 입력하면 위 코드에서 지정했던 디렉토리의 Barrel 파일이 자동 생성됩니다.

---

🔎 적용 전

---

🔎 적용 후

---

🔎 주의 사항

src 폴더의 바로 아래 자식 폴더들이 export 경로의 root가 됩니다.

 

그렇기에 모든 모듈들이 export root 경로의 이름으로 export 되어서
폴더 명, 파일 명, 함수 명, 변수 명은 반드시 중복되지 않고 unique **해야 합니다.

 

ex) export root = @pages, @hooks, @components...

 

 

📒 Barrel 파일을 사용하지 마라?

---

[Korean FE Article] 자바스크립트 에코시스템의 속도 향상 - 배럴(Barrel) 파일의 대실패

 

스크립트를 만들고 너무 신나서 프로젝트의 몇몇 디렉토리에 배럴 파일을 적용한다고

반나절동안 모든 폴더의 중복을 없애서 완성한 후 이 글을 봐버렸습니다…

 

뭔가 당연히 모든 파일을 모아서 내보내기 하면 성능상으로 불리함이 있을 거라 생각은 했으나

위 글에서 너무나 무시무시하게 말하길래 반나절을 낭비했나 싶어 좌절했습니다.

 

하루종일 고민한 결론부터 말하자면 “그냥 사용하는 편이 더 낫다” 입니다.

 

그 이유는 다음과 같습니다.

---

📌 런타임에서는 똑같다

위 글에서도 알 수 있다시피 런타임에는 지장이 없습니다.

 

즉, 실제 사용하는 사용자는 배럴을 사용하나 사용하지 않으나 똑같다는 말입니다.

 

하지만 문제가 생기는 부분은 대부분 개발 단계에서 조금 더 시간이 지연된다는 것인데
요즘 컴퓨팅 파워가 워낙 상향평준화를 이뤘기도 하고,
몇십 줄의 import 라인을 보며 화가 치솟는 것보다 시간이 조금 더 걸리는 게 훨씬 낫다고 판단했습니다.

 

그럼 여러분은 각자의 확실한 가치판단으로 배럴파일의 사용여부를 결정하시길 바랍니다!