如何自动导入和捆绑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模块/文件？

回答

相关问题