5

I'm building nw.js app with Webpack and Angular. I would like to achieve something what I've seen and used in my other plane angular app from this boilerplate https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate.

The following code serves for the code & modules organization, and it does a great job. In the each module there is a _index.js file which contains the following:

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

This exports the angular module, and then in the same directory each file just requires it, and continues using it (not quite sure but probably the one requiring it doesn't have to be in the same directory):

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

Now for the Webpack implementation I've tried adjusting this example this:

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

and this is my version of it

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

I'm pretty sure my regex is not correctly applied there, so I need your help on how to make this work.

On the other hand I'm not sure on how the boilerplate's bulk-require functions, and what it does exactly. I believe that it includes all of the files somehow, because otherwise no other part of the application would know about them. So, instead including every directive, service and controller manually, I'd say it does that job for you.

Help much obliged :)

Nemanja Milosavljevic
  • 1,251
  • 18
  • 33

3 Answers3

2

SOLVED.

I've ended up using the solution from this page, and adapting it a bit. The regex provided by @user3335966 returned the file that I meant to exclude, but thanks anyway :)

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

The idea was to include all the files in the folder and subfolders, but not the _index.js.

This regex however does return every .js file:

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

And since I don't know regex, I ended up excluding the _index.js in the function where I have it as a result:

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

So now I basically do this:

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

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

That way I define an angular module, and make it available to all other files inside that folder (controllers, services, directives).

I'd appreciate if anyone have an idea how to do the exclusion in the regex.

Community
  • 1
  • 1
Nemanja Milosavljevic
  • 1,251
  • 18
  • 33
0

I'm not sure, and can be mistaken, but it looks like incorrect use * quantifier in regex and not escaped characters / and .; You trying apply redundant quantifier to /, *, ( and |;
If You wont get "any character zero or more times", You must use .*
something like this:

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

Also You can use \w - any alphanumeric characters (instead .);

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

Also I dnt understand, what You meant, when use !;

This example find strings like aaa/bbb/ccc/blabla_index.js & aaa/bbb/ccc/blabla.spec.js:

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

I hope this will help you;

user3335966
  • 2,673
  • 4
  • 30
  • 33
0

For my Angular project app on ElectronJS, I wrote a small webpack loader, for require all files in directory tree by pattern, like a bulk.

I use it to require modules. Example for js file:

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

I use it to require all module dependency(js, html for template cache, images). Example for js file:

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

And use it for css. Example for css file:

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

I use it successfully on my project. Maybe it's someone else make life easier. https://www.npmjs.com/package/required-loader

shanhaichik
  • 2,436
  • 2
  • 11
  • 12