Webpack'是批量需求实现问题的替代方案

Webpack's alternative for bulk-require implementation issue

本文关键字：问题 实现 方案 需求 Webpack      更新时间：2023-09-26

我正在用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']);

这将导出angular模块，然后在同一个目录中，每个文件只需要它，并继续使用它(不太确定，但可能需要它的文件不一定在同一个目录中):

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

现在对于Webpack实现，我试着调整这个例子如下:

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

这是我的版本

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

我很确定我的正则表达式没有正确地应用在那里，所以我需要你的帮助如何使这个工作。

另一方面，我不确定样板文件的批量要求函数是如何实现的，以及它究竟是做什么的。我相信它以某种方式包含了所有的文件，否则应用程序的其他部分就不会知道它们。因此，与其手动包含每个指令、服务和控制器，不如让它为你完成这项工作。

非常感谢:)

SOLVED.

我最终使用了本文中的解决方案，并对其进行了一些调整。@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);
    }
});

这样我就定义了一个angular模块，并使它对该文件夹下的所有文件(控制器、服务、指令)都可用。

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

我不确定，可能是错误的，但它看起来不正确使用*量词在regex和没有转义字符/和.;您试图将冗余量词应用于/, *, (和|;
如果你不能得到"任何字符0次或以上"，你必须使用.*
像这样:

/'.'/.*'/!(.*_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/

对于我在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

相关文章：