如何从 webpack javascript 中的文件夹、子文件夹及其子文件夹中动态获取文件答案

【问题标题】：How to get files dynamically from folder, subfolder and its subfolder in webpack javascript如何从 webpack javascript 中的文件夹、子文件夹及其子文件夹中动态获取文件
【发布时间】：2018-10-21 05:41:50
【问题描述】：

我正在尝试使用webpack 在VueJs 中构建一个小型应用程序，我想在其中动态包含来自文件夹的config/routing 文件。我有一个类似这样的文件夹结构：

plugins
|----Ecommerce
|--------backend
|--------frontend
|------------config.js
|------------routes.js
|------------components
|----------------products.vue
|----Blog
|--------backend
|--------frontend
|------------config.js
|------------routes.js
|------------components
|----------------posts.vue

为此，我试图将我的文件包含在：

const configRequire = require.context('./../plugins/', true, /\.\/[^/]+\/config\.js$/);
const routesRequire = require.context('./../plugins/', true, /\.\/[^/]+\/routes\.js$/);

但不知何故，它不包括文件。我猜我的正则表达式有问题

编辑：

发现了问题，我的文件没有被导入，因为它在folders/subfolder/subfolder 中，如果我保持文件夹结构如下：

plugins
|----Ecommerce
|--------backend
|--------config.js
|--------routes.js
|--------frontend
|------------components
|----------------products.vue
|----Blog
|--------backend
|--------config.js
|--------routes.js
|--------frontend
|------------components
|----------------posts.vue

我可以看到我的文件正在被导入。但是当我将我的config/routes 文件保存在frontend 文件夹中时没有得到

帮我解决这个问题。谢谢。

【问题讨论】：

我不熟悉require.context 语法，但它是包含route\.js 的正则表达式和包含route 的实际文件s .js a键入您在将问题复制到 StackOverflow 时介绍的内容
@Ferrybig 感谢您的提示。
尝试调整您的正则表达式，您匹配的 ./ 仅适用于当前目录（插件），不适用于其任何子目录。修复正则表达式，你应该没问题。
@TommyF 是的，但我不太了解。
谢谢大家，我做了/\.\/[^/]+\/[frontend]+\/config\.js$/ 并且成功了。 @TommyF

标签： javascript regex vue.js webpack vuejs2

【解决方案1】：

选中此项以更好地了解您当前的正则表达式：https://regex101.com/r/Y9sDZc/1（删除第一行以查看它与第二行的不匹配之处。）

我不完全确定你想要匹配什么，什么不匹配，所以我只能猜测你的情况的正确解决方案是什么，但这里有一些选项：
config\.js 匹配所有名为 @ 的文件987654323@。目录由您的 require.context 参数处理。这也可以匹配plugins/foo/bar/config.js/somefile.txt，但如果您控制所有文件并确定这不是问题，使用config\.js 是您最简单的解决方案。

更有选择性的是：
.*\/config\.js$

希望对您有所帮助。

【讨论】：