JavaScript 모듈/파일을 자동으로 가져오고 묶는 방법은 무엇입니까?

Question

은 (중요하지 않은하지만 실제 생활 시나리오의)는 redux 프로젝트의 자바 스크립트 파일의 파일 구조 다음 사항을 고려 :

import { combineReducers } from 'redux' 
import a from './a/reducer' 
import b from './b/reducer' 
import c from './c/reducer' 

export default combineReducers({ a, b, c }); 

참고 :

plugins/ 
    a/reducer.js 
    b/reducer.js 
    c/reducer.js 
    rootReducer.js 

이 rootReducer.js의 현재 내용은 reducer.js 파일의 각각 이 기본 출력 감속기 기능을 내 보냅니다.

새 플러그인을 추가하려면 해당 폴더를 만들고 새 reducer.js 파일을 추가 한 다음 수동으로 감속기 파일을 가져 와서 rootReducer.js에 등록해야합니다.

이 프로세스를 완전 자동으로하고 싶습니다.rootReducer.js 파일이 모든 하위 디렉토리를 통과하도록하고 reducer.js 파일을 찾아서 가져 와서 폴더 이름을 사용하여 루트 감속기에 추가하십시오.

JavaScript 코드를 컴파일하고 번들하는 데 webpack 및 babel을 사용하고 있습니다.

Node.js에 파일 시스템 API가있어 폴더를 반복하고 reducer.js 파일을 찾을 수 있습니다. 하지만 일단 webpack과 함께 번들로 올바르게 작동합니까? 모듈/파일을 동적으로 가져 오는 것이 안전합니까?

Answer 1

당신은 당신의 프로젝트 디렉토리 당신이 원하는 어떤 이름을이 다음

'use strict'; 

const fs = require('fs'); 
const DIR = __dirname + '/plugins'; 
const output = __dirname + '/plugins/rootReducer.js'; 

return fs.readdir(DIR, (err, files) => { 
    let result = `import { combineReducers } from 'redux'\n`; 
    let references = []; 
    let reducers = files.filter(a => !a.includes('.')); 

    reducers.forEach(reducer => { 
    references.push(reducer); 
    result += `import ${reducer} from './${reducer}/reducer'\n`; 
    }); 

    result += `\nexport default combineReducers({ ${references} });\n`; 
    fs.writeFile(output, result, err => { 
    if(err) throw err; 
    console.log(output + ' updated'); 
    }); 
}); 

장소와 비슷한 뭔가를 할 수 있습니다. 이것을 reducers라고 부릅니다 .Scripts.js

여기서 노드를 수동으로 실행하려면 node reducersScript.js을 사용하거나 빌드 프로세스에 연결하십시오.