Geek Answers Handbook

Webpack Alternative to Solve Bulk Upload Issues

I am building an nw.js application using Webpack and Angular. I would like to achieve something that I saw and used in my other angular application from this template https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate .

The following code is for organizing code and modules, and it does a great job. Each module has a _index.js file that 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 to the same directory each file simply requires it and continues to use it (not quite sure, but maybe the one that requires it should not be in the same directory):

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

Now, to implement Webpack, I tried setting up this this example:

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

and this is my version

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

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

On the other hand, I'm not sure how the template functions require the function, and what exactly it does. I believe that it includes all the files, since otherwise no other part of the application will know about them. So instead, including each directive, service, and controller manually, I would say that it does the job for you.

Help a lot :)

+5
source share
3 answers

solvable.

I decided to use this solution on this page and adapted it a bit. The regular expression provided by @ user3335966 returned the file I wanted 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 _index.js .

This regular expression, however, returns every .js file:

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

And since I don't know the regex, I ended up _index.js in a function in which I have this:

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

Thus, I define the angular module and make it available to all other files inside this folder (controllers, services, directives).

I would appreciate if anyone has an idea how to make an exception in regex.

+2
source

I'm not sure, and I could be wrong, but it looks like the wrong use of the quantifier * in the regular expression, and not the escaped characters / and . ; You are trying to apply a redundant quantifier to / , * , ( and | ;
If you do not get "any character zero or more times", you should use .*
something like that:

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

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

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

Also, I don’t understand what you had in mind when using it ! ;

In this example, find strings like aaa/bbb/ccc/blabla_index.js and aaa/bbb/ccc/blabla.spec.js :

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

I hope this helps you;

0
source

For my Angular ElectronJS project project, I wrote a small web package downloader that requires all the files in the directory tree by template, like volume.

I use it to use 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 successfully use it in my project. Maybe someone else will make life easier. https://www.npmjs.com/package/required-loader

0
source

More articles:


All Articles