Index.js 에 모아서 한 번에 export 하는 것을 자동화 해봤다

저는 import 문을 정리하기 위해서

2-3개 이상 같은 디렉토리 내에서 import 를 해야한다 싶으면

// Signin/index.js
export { default as ErrorMessage } from './ErrorMessage'
export { default as LoginForm } from './LoginForm'
export { default as SignIn } from './SignIn'

해당 디렉토리의 index.js 에 모아서 한 번에 export 해주고

 

import { ErrorMessage, LgoinForm, SignIn } from '../Sigin'

 

이런식으로 한 번에 import 해왔습니다.

 

하지만 파일을 생성할 때마다 직접 새로 추가해줘야된다는 문제점이 있었습니다!

 

그래서 이러한 동작을 자동화하는 코드를 짜보았습니다.

 

path( src 기준 ) 를 입력 받음 -> 해당 path 하위에 있는 파일명을 가져옴 -> 해당 path 하위에 있는 파일 중 index.js 를 제외하고 export 문을 추가

 

const fs = require('fs');
const readline = require('readline');
const INDEX_JS = 'index.js';
const parentPath = '../';

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

// path 하위 파일 이름을 읽는다
const getFileList = path => fs.readdirSync(`${parentPath}${path}`);

// return export sentence
const getExportSentence = realFileName =>
  `export { default as ${realFileName} } from './${realFileName}'`;

// file 수정 또는 생성 후 내용 작성
const updateIndexJS = (path, fileList) => {
  const writePlace = `${parentPath}${path}/${INDEX_JS}`;
  fileList = fileList.filter(file => file !== INDEX_JS);
  const gatherExport = fileList.map(file => {
    const realFileName = file.slice(0, -3);
    return getExportSentence(realFileName) + '\n';
  });
  fs.writeFileSync(writePlace, gatherExport.join(''));
  console.log('update!');
};

rl.on('line', function (path) {
  const fileList = getFileList(path);
  updateIndexJS(path, fileList);

  rl.close();
}).on('close', function () {
  process.exit();
});

// 예시 path : 'pages/Signin'
// src 기준 path 를 받는다

 

결과

export { default as ErrorMessage } from './ErrorMessage'
export { default as LoginForm } from './LoginForm'
export { default as SignIn } from './SignIn'

 

문제점

1. js 파일만 고려하고 jsx, json 등 기타 다른 파일을 고려하지 않았다.

export { default as RouteNoMatch. } from './RouteNoMatch.'

- 파일 이름을 자를 때 js 기준으로 slice의 마지막 인덱스를 -3으로 주었는데 여기서 문제가 생긴다.

- (해결책) 어느 확장자 파일이든 공용으로 사용할 수 있게 만든다.

const realFileName = file.slice(0, -3); // js 파일만 고려

const [realFileName, extension] = file.split('.'); // 모든 확장자 파일 고려

 

2. 애초에 export default 로 해놓은 컴포넌트 파일만 해야하는데 모든 하위 파일을 다 한다.

- 어차피 view와 기타 파일은 분리해놓으니 이 부분은 괜찮을 것 같다

 

---

참고로 이 파일은 src/utils 하위에 있을 때의 상대경로를 사용했다.

 

지금은 죄다 동기적으로만 구현해놨는데

fs.writeFileSync 와 fs.writeFile 차이점을 정확히 공부해야겠다.