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

【问题标题】：How to automatically import and bundle JavaScript modules/files?如何自动导入和捆绑 JavaScript 模块/文件？
【发布时间】：2016-07-14 14:24:45
【问题描述】：

考虑以下 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 并最终导入并添加使用文件夹名称将其发送到根减速器。

我正在使用 webpack 和 babel 来编译和捆绑我的 JavaScript 文件。

我知道 Node.js 中有一个文件系统 API，它允许我遍历文件夹并查找 reducer.js 文件。但是一旦与 webpack 捆绑，它会正常工作吗？动态导入模块/文件是否安全？

【问题讨论】：

I'm afraid what you're asking for is impossible.
使用require怎么样？

标签： javascript ecmascript-6 webpack redux babeljs

【解决方案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 运行它，或者将其挂接到您的构建过程中。

【讨论】：