0

我标记了守望者，因为它可能是我正在寻找的解决方案，但我不太知道如何以这种方式使用它！

我有一个目录

/imgs
    /icons
        /bird.png
        /cat.png
        /dog.png
        /pig.png

我有一个文件

/imgs/index.js

我的 index.js 负责导入所有图像，然后导出一个对象以供我项目的其余部分使用。

const bird = require('./icons/bird.png');
const cat = require('./icons/cat.png');
const dog = require('./icons/dog.png');
const pig = require('./icons/pig.png');

const Icons = { bird, cat, dog, pig };

export default Icons;

我想做的是查看我的 imgs 文件夹中的新增内容，并自动更新我的 index.js 以导入这些新文件并将它们添加到我的对象中。我需要使用 Common.js 导入它们并使用 ES6 导出它们。

有谁知道解决这个问题的好方法？

4

1 回答 1

1

一个潜在的解决方案是编写一个生成 index.js 的 JavaScript 脚本，如下所示：

'use strict';

const fs = require('fs');
const DIR = __dirname + '/imgs/icons';
const output = __dirname + '/imgs/index.js';

return fs.readdir(DIR, (err, files) => {
  let result = '';
  let references = [];
  files.forEach(item => {
    // assuming item has the format animal.png
    let newReference = item.split('.')[0];
    references.push(newReference);
    result += `const ${newReference} = require('./icons/${item}');\n`;
  });
  result += `\nconst Icons = { ${references} };\n\nexport default Icons;`;
  fs.writeFile(output, result, err => {
    if (err) throw err;
    console.log(output + ' updated');
  });
});

将该文件（为此我们称之为 watcher.js）放在imgs的父目录中，并在检测到图标目录中的更改时让 watchman 运行它：

watchman imgs/icons "node watcher.js"

请注意，如果将新文件放入监视目录，则 index.js-creating 脚本将不会重新运行。只有当它再次被更改（即使只是再次使用相同的数据保存），index.js 才会反映该更改。

您可以通过运行touch imgs/icons/crabigator.png两次来简单地测试它并查看 watchman 日志和/或 index.js 的内容。

于 2017-05-20T01:42:11.523 回答