weback - require.context

• 코드 내에서 동적으로 모듈을 불러올 수 있는 기능
• 많은 모듈을 한꺼번에 불러오거나, 동적으로 모듈을 불러올 때 사용된다.

기본 구문

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

• directory : 검색 할 디렉토리
• useSubdirectories : 하위 디렉토리도 검색 할 지 여부
• regExp : 파일명 매칭을 위한 정규표현식

반환값

• context 함수를 반환한다.
• 이 함수는 다음과 같은 속성/메서드를 가진다.
  • keys() : 매칭된 모든 파일의 경로 반환
  • id : context module 의 id
  • resolve() : 파일의 경로를 해석

사용 예시

const requireComponent = require.context('./components', false, /\.vue$/);

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.split('/').pop().replace(/\.\w+$/, '');
  
  // 여기서 컴포넌트를 등록하거나 다른 작업을 수행할 수 있다.
  console.log(componentName, componentConfig);
});

장점

• 코드 스플릿팅에 활용 가능

  • 필요한 모듈만 동적으로 로딩할 수 있도록 설정 가능하다.

• 자동화

  • 특정 패턴의 파일들을 자동으로 불러올 수 있음

• 유연성

  • 런타임에 모듈을 동적으로 결정하고, 불러올 수 있음.

• Registry Pattern과 결합하여 사용해볼 수 있을법함.

  • 즉, 모듈들을 동적으로 불러오고 레지스트리에 등록하도록?

주의사항

• 많은 파일을 대상으로 할 경우, 빌드 시간이 길어질 수 있음