javascript 在使用webpack时,有没有办法将目录中的文件列表放入变量中?

f45qwnt8  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(98)

在创建浏览器应用程序时,似乎没有任何方法可以使用javascript获得特定位置的文件列表,而在Nodejs中,使用fs可以很容易地做到这一点。
基本上我有一个名为images/的目录,我想把所有文件的列表作为一个javascript变量来操作,而不必手动创建文件列表。我想,既然webpack捆绑了所有文件,那么可能有某种方法可以把列表生成为JSON文件(或替代方案),可以用javascript读入--尽管我还没有找到任何方法来做到这一点。
做这件事的最好方法是什么?

zbdgwd5y

zbdgwd5y1#

我能够通过创建一个插件来解决这个问题:
src/plugins/FileLister.js

const fs = require('fs');

class FileLister {
  constructor(options) {
    if (!options || !options.path || !options.outputFile) {
      const msg = "Please specify the path and outputFile options.";
      throw new Error(msg);
    }
    this.options = options
  }
  apply(compiler) {
    compiler.hooks.done.tap({name: 'FileLister'}, () => {
      const files = fs.readdirSync(this.options.path)
      fs.writeFileSync(this.options.outputFile, JSON.stringify(files));
    })
  }
}

module.exports = FileLister;

然后在我的webpackage.config.js中:
进口:

const FirmwareLister = require('./src/plugins/FileLister.js')

插件部分:

new FirmwareLister({
  path: path.resolve(__dirname, 'src/important_files/'),
  outputFile: path.resolve(__dirname, 'dist/important_files.json')
}),

这将在dist目录中创建一个名为important_files.json的文件,其中包含src/important_files/中的文件列表。

相关问题