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

Question

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

我有一个目录

/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 将反映该更改。

你可以简单地通过运行ning touch imgs/icons/crabigator.png 两次测试，然后查看 index.js.

的 watchman 日志 and/or 内容

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

How can I automatically update my javascript file to import newly detected files?

javascript

ecmascript-6

reactjs

watchman