javascript - 如何自动更新我的 javascript 文件以导入新检测到的文件？

Question

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

我有一个目录

/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 导出它们。

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

Answer 1

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

'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 的脚本将不会重新运行。仅当它再次更改时(即使只是使用相同的数据再次保存)，index.js 才会反射(reflect)该更改。

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