JavaScriptモジュール/ファイルを自動的にインポートしてバンドルする方法は？

Question

は（つまり重要ではありませんが、それは現実のシナリオだ）reduxプロジェクトのJavaScriptファイルのファイル構造を次の点を考慮

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

これはrootReducer.jsの現在の内容です：

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 }); 

注意reducer.jsファイルのそれぞれは、デフォルトのエクスポートであるのリデューサ機能を実行します。

新しいプラグインを追加するには、適切なフォルダを作成し、新しいreducer.jsファイルを追加してから、レシピタファイルを手動でインポートしてrootReducer.jsに登録する必要があります。

私はこのプロセスを完全に自動化したいと思います。rootReducer.jsファイルをすべてのサブディレクトリに移動し、その中にファイルreducer.jsを探して、最終的にファイルをインポートし、フォルダ名を使用してルートレデューサーに追加します。

私はwebpackとbabelを使用してJavaScriptファイルをコンパイルしてバンドルしています。

私は、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'); 
    }); 
}); 

プレイスが似たようなこの操作を行うと、あなたが好きなものは何でも、それに名前を付けることができます。 reducersScript.jsと呼ぶ

ノードを手動で実行するには、node reducersScript.jsを手動で実行するか、ビルドプロセスにフックします。