如何自動導入和捆綁JavaScript模塊/文件？

考慮以下的redux項目的JavaScript文件的文件結構（這是不是很重要，但它是一個真實的生活場景）：如何自動導入和捆綁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函數。

要添加一個新的插件，我創建一個合適的文件夾，添加一個新的reducer.js文件，然後我需要手動導入reducer文件並在rootReducer.js中註冊它。

我想這個過程是全自動的。我希望rootReducer.js文件遍歷所有子目錄，在其中查找文件reducer.js，並最終導入它並使用文件夾名稱將其添加到根縮減程序。

我正在使用webpack和babel來編譯和捆綁我的JavaScript文件。

我知道Node.js中有一個文件系統API，它允許我遍歷文件夾並查找reducer.js文件。但是，一旦與webpack捆綁在一起，它會正常工作嗎？動態導入模塊/文件是否安全？

來源

2016-07-14 tobik

[我怕你要求的是不可能的。]（http://stackoverflow.com/questions/30340005/importing-modules-using-es6-syntax-and-dynamic-path） – Ashitaka

使用'require'？ – tobik

你可以做類似下面的

'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或掛鉤到你的構建過程。

來源

2017-05-20 03:26:37 Koblinski

如何自動導入和捆綁JavaScript模塊/文件？

回答

相關問題