Webpack 解决批量需求实现问题的替代方案答案

【问题标题】：Webpack's alternative for bulk-require implementation issueWebpack 解决批量需求实现问题的替代方案
【发布时间】：2015-11-11 22:48:33
【问题描述】：

我正在使用 Webpack 和 Angular 构建 nw.js 应用程序。我想从这个样板 https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate 中实现我在其他平面角度应用程序中看到和使用的东西。

以下代码用于代码和模块组织，它做得很好。在每个模块中都有一个 _index.js 文件，其中包含以下内容：

var bulk = require('bulk-require');
module.exports = angular.module('app.services', []);
bulk(__dirname, ['./**/!(*_index|*.spec).js']);

这会导出角度模块，然后在同一目录中每个文件只需要它，并继续使用它（不太确定，但可能需要它的文件不必在同一目录中）：

var app = require('./_index');
app.controller('SomeCtrl', function...);

现在对于 Webpack 实现，我尝试调整此示例 this：

require.context("..", true, /^grunt-[^\/]+\/tasks/[^\/]+$/);

这是我的版本

require.context(__dirname, true, /./**/!(*_index|*.spec).js/);

我很确定我的正则表达式没有正确应用在那里，所以我需要你的帮助来解决这个问题。

另一方面，我不确定样板的批量需求功能如何，以及它的具体作用。我相信它以某种方式包含所有文件，因为否则应用程序的其他部分不会知道它们。因此，与其手动包含每个指令、服务和控制器，我会说它为您完成了这项工作。

非常有责任帮助:)

【问题讨论】：

标签： javascript regex angularjs webpack nw.js

【解决方案1】：

我不确定，可能会被弄错，但看起来在正则表达式中使用了不正确的* 量词，而不是转义字符/ 和.；您尝试将冗余量词应用于 /、*、( 和 |；
如果你不会得到“任何字符零次或多次”，你必须使用.*
像这样：

/\.\/.*\/!(.*_index|.*\.spec)\.js/

您也可以使用\w - 任何字母数字字符（而不是.）；

/\.\/\w*\/!(\w*_index|\w*.spec)\.js/

我也不明白你的意思，当使用!时；

这个例子找到像aaa/bbb/ccc/blabla_index.js & aaa/bbb/ccc/blabla.spec.js这样的字符串：

/(\w*\/)*(\w*_index|\w*\.spec)\.js/

希望对你有帮助；

【讨论】：

我一定会在今天晚些时候试试这个。感谢您对正则表达式@user3335966 的帮助:)

【解决方案2】：

已解决。

我最终使用了page 中的解决方案，并对其进行了一些调整。 @user3335966 提供的正则表达式返回了我打算排除的文件，但无论如何谢谢:)

/(\w*\/)*(\w*_index|\w*\.spec)\.js/

想法是包含文件夹和子文件夹中的所有文件，但不包括_index.js。

然而，这个正则表达式确实会返回每个 .js 文件：

/^(.*\.(js$))[^.]*$/igm

由于我不知道正则表达式，因此我最终在函数中排除了 _index.js，结果是：

var req = require.context("./", true, /^(.*\.(js$))[^.]*$/igm);
req.keys().forEach(function(key){
    if (key !== './_index.js') {
        req(key);
    }
});

所以现在我基本上是这样做的：

module.exports = angular.module('app.homeModule', []);

var req = require.context("./", true, /^(.*\.(js$))[^.]*$/igm);
req.keys().forEach(function(key){
    if (key !== './_index.js') {
        req(key);
    }
});

这样我定义了一个角度模块，并使其可用于该文件夹内的所有其他文件（控制器、服务、指令）。

如果有人知道如何在正则表达式中进行排除，我将不胜感激。

【讨论】：

【解决方案3】：

对于我在 ElectronJS 上的 Angular 项目应用程序，我编写了一个小型 webpack 加载器，用于按模式要求目录树中的所有文件，就像批量一样。

我用它来要求模块。 js文件示例：

//@require "./**/index.js"

我使用它来要求所有模块依赖项（js、用于模板缓存的 html、图像）。 js文件示例：

//@require "./**/!(index|config|run)*"

并将其用于 css。 css文件示例：

@require "./**/!(app|bootstrap).css";

我在我的项目中成功使用了它。也许是别人让生活更轻松。 https://www.npmjs.com/package/required-loader

【讨论】：