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

时间:2015-08-18 20:19:56

标签: javascript regex angularjs webpack nw.js

我正在使用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实现,我尝试调整此示例this

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

这是我的版本

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

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

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

帮助很多:)

3 个答案:

答案 0 :(得分:2)

解决。

我最终使用了这个page的解决方案,并稍微调整了一下。 @ user3335966提供的正则表达式返回了我要排除的文件,但无论如何都要感谢:)

_index.js

我们的想法是在文件夹和子文件夹中包含所有文件,但不包括/^(.*\.(js$))[^.]*$/igm

然而,这个正则表达式确实返回每个.js文件:

_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);
    }
});

所以现在我基本上这样做了:

com.google.api.server.spi.Constant.API_EXPLORER_CLIENT_ID

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

如果有人知道如何在正则表达式中排除,我会很感激。

答案 1 :(得分: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/

我希望这会对你有所帮助;

答案 2 :(得分:0)

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