如何将文件夹中的所有文件作为模块导入并将所有文件导出为对象? [重复]

问题描述 投票:0回答:2

我正在尝试将每个文件作为模块导出到某个文件夹中,作为单个对象导入。我该怎么做?

我用一个很长的单个文件制作了一个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';
javascript webpack ecmascript-6
2个回答
2
投票
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;

这样的事情有帮助吗?


1
投票

自动执行此操作似乎是一个好主意,但是使用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,你可以改变要求到./baz-temp等。

另外,以小写字母命名文件总是一个好主意,所以如果你想要包含一个自动执行此操作的类将是一个问题。但只是做 - > Foo: require('./foo')会好的。

© www.soinside.com 2019 - 2024. All rights reserved.