从目录导入所有文件并将文件名映射到数组

时间:2018-12-18 10:00:52

标签: javascript vue.js webpack

我目前使用Vue和Webpack进行了设置:

const imports = {
  foo: require('./folder/foo.yml'),
  bar: require('./folder/bar.yml')
}

是否可以通过这种结构动态添加更多键+值,而键等于文件名而没有文件扩展名?

2 个答案:

答案 0 :(得分:0)

您可以使用Array#reduce来构建这样的对象 ,例如:

var require = n => n;
var imports = ['foo', 'bar', 'baz', 'bat'].reduce((acc, val) => {
  acc[val] = require(`./folder/${val}`);
 return acc;
}, {})

console.log(imports);

数组中的值可能来自fs.readdirSync之类的东西,因此我们将拥有例如:

const ymlFiles = fs.readdirSync('./folder')
  .filter(filename => filename.split('.').reverse()[0] === 'yml');
const ymlFilesNoExt = ymlFiles.map(filename => filename.replace(/\.yml$/, ""))
const imports = ymlFilesNoExtvar require = n => n;
var imports = ['foo', 'bar', 'baz', 'bat'].reduce((acc, val) => {
  acc[val] = require(`./folder/${val}`);
 return acc;
}, {});

希望有帮助,
问候

答案 1 :(得分:0)

请查看是否有帮助。

const testFolder = './tests/';
const fs = require('fs');

const imports = {}

fs.readdirSync(testFolder).forEach(file => {
    const filekey = file.split('.').slice(0, -1).join('.');
    imports[filekey] = require('./tests/' + file);
  });