Question

我试图将每个文件作为模块导出到某个文件夹中，以作为单个对象导入。我该怎么办？

我用一个很长的单个文件制作了一个javascript插件。现在我正在尝试使其被多个文件分开。我正在使用Webpack。

然后，在我的插件代码中，有一个名为“ fn”的巨大对象，其中包含40〜50个函数，每个函数有200〜300行。为了拆分它们，我创建了一个名为“ fn”的文件夹，并将每个函数作为每个文件放置。文件的每个名称和函数的名称都相同。因此默认情况下，名为“ foo”的函数会导出到“ fn”文件夹中名为“ foo.js”的文件中。

现在我正尝试将它们全部导入，并像这样将其导出为单个对象。

src / fn / foo_or_whatever.js

export default function aFunctionWhichIUse(){
  // return whatever;
}

src / fn / index.js

import foo from './foo';
import bar from './bar';
import fooz from './fooz';
import baz from './baz';
import kee from './kee';
import poo from './poo';
import tar from './tar';
import doo from './doo';
.
.
.
import foo_or_whatever from './foo_or_whatever';

export default {
  foo,
  bar,
  fooz,
  baz,
  kee,
  poo,
  tar,
  doo,
  .
  .
  .
  foo_or_whatever,
}

src / index.js

import fn from './fn'

但是我认为这没有道理。现在，我必须每四次键入相同的单词，才能在“ fn”对象中添加一个函数。

我发现导入/导出系统不支持从文件夹导入所有文件。然后，我应该使用什么以及应该如何编写代码来做到这一点？

有没有办法做到这一点？不管该方法是否为导入/导出系统，只要该方法在webpack上有效即可。

src / index.js

import * as fn from './fn';

Answer 1

const fs = require('fs');
const path = require('path');

const basename = path.basename(__filename);
const functions = {}

fs
  .readdirSync("./")
  .filter(file => (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js'))
  .map((file) => {functions[file.slice(0, -3)] = require(path.join(__dirname, file})))

module.exports = functions;

这样的帮助吗？

Answer 2

自动执行此操作似乎是一个好主意，但是使用webpack时，它将需要特殊的插件来处理它。

但是如果重复的部分是您的主要关注点，那么我可能还有另一种想法。

Webpack也可以处理commonjs模块。所以你可以做的是->

module.exports = {
  foo: require('./foo'),
  bar: require('./bar'),
  fooz: require('./fooz'),
  baz: require('./baz'),
  kee: require('./kee'),
  poo: require('./poo'),
  tar: require('./tar'),
  doo: require('./doo')
};

另一个建议是，如果说您想临时替换baz，则可以将require更改为./baz-temp等。

将文件命名为小写也是一个好主意，因此，如果要包含一个自动执行此操作的类，将是一个问题。但是只要-> Foo: require('./foo')就可以了。

如何将文件夹中的所有文件作为模块导入，如何将所有文件导出为对象？

2 个答案: