[javascript] require 문없이 웹팩을 사용하여 디렉토리의 모든 파일을로드하는 방법

@splintor의 모든 장점 (감사합니다).

그러나 여기에는 내 자신의 파생 버전이 있습니다.

혜택:

• 어떤 모듈 내보내기가 {module_name: exports_obj}개체 아래에 수집됩니다 .
  • module_name 은 파일 이름으로 빌드됩니다.
  • … 확장자없이 슬래시를 밑줄로 대체합니다 (하위 디렉토리 스캔의 경우).
• 쉽게 사용자 정의 할 수 있도록 주석을 추가했습니다.
  • 즉, 루트 수준 모듈에 수동으로 필요한 파일이있는 경우 하위 디렉터리에 파일을 포함하지 않을 수 있습니다 .

편집 : 저처럼 모듈이 (적어도 루트 수준에서) 일반 자바 스크립트 객체 이외의 다른 것을 반환하지 않는다고 확신하는 경우 원래 디렉토리 구조를 복제하여 “마운트”할 수도 있습니다 ( 코드 (Deep Version 참조) ) 섹션).

코드 (원래 버전) :

function requireAll(r) {
    return Object.fromEntries(
        r.keys().map(function(mpath, ...args) {
            const result =  r(mpath, ...args);
            const name = mpath
                .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
                .replace(/\//g, '_') // Relace '/'s by '_'s
            ;
            return [name, result];
        })
    );
};
const allModules = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

예:

최종 결과에 대한 샘플 출력 console.log(allModules);:

{
  main: { title: 'Webpack Express Playground' },
  views_home: {
    greeting: 'Welcome to Something!!',
    title: 'Webpack Express Playground'
  }
}

디렉토리 트리 :

models
├── main.js
└── views
    └── home.js

코드 (딥 버전) :

function jsonSet(target, path, value) {
    let current = target;
    path = [...path]; // Detach
    const item = path.pop();
    path.forEach(function(key) {
        (current[key] || (current[key] = {}));
        current = current[key];
    });
    current[item] = value;
    return target;
};
function requireAll(r) {
    const gather = {};
    r.keys().forEach(function(mpath, ...args) {
        const result =  r(mpath, ...args);
        const path = mpath
            .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
            .split('/')
        ;
        jsonSet(gather, path, result);
    });
    return gather;
};
const models = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

예:

이 버전을 사용한 이전 예제의 결과 :

{
  main: { title: 'Webpack Express Playground' },
  views: {
    home: {
      greeting: 'Welcome to Something!!',
      title: 'Webpack Express Playground'
    }
  }
}

답변

function requireAll(r) { r.keys().forEach(r); }

requireAll(require.context('./js/', true, /\.js$/));