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函数。

要添加新插件，我创建一个合适的文件夹，向其添加一个新的reducer.js文件，然后我需要手动导入reducer文件并在rootReducer.js中注册。

我希望这个过程完全自动化。我希望rootReducer.js文件遍历所有子目录，在其中查找文件reducer.js并最终导入它并使用文件夹名称将其添加到根reducer。

我正在使用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运行它，也可以将其挂钩到构建过程中。

如何自动导入和捆绑JavaScript模块/文件？

1 个答案: