Include example using bower

[beatgammit]

I haven't been able to figure out how to use bower in a requirejs project using gulp as the builder. I have the following structure:

• src/
  • main.js
  • require.config.js - generated with bower-requirejs
• bower_components/
  • reqwest

Here's my gulpfile.js:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    amdOptimize = require('amd-optimize'),
    bowerRequireJS = require('bower-requirejs');

gulp.task('default', function () {
    gulp.src(['src/main.js', 'bower_components/**/*.js'])
        .pipe(amdOptimize('main', {baseURL: 'src', configFile: 'src/require.config.js'}))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('public'));
});

gulp.task('bower', function () {
    var options = {
        baseUrl: 'src',
        config: 'src/require.config.js',
        transitive: true,
    };

    bowerRequireJS(options, function (rjsConfigFromBower) {
        console.log('whatever');
    });
});

And here's my require.config.js generated from the 'bower' task:

require.config({
  shim: {

  },
  paths: {
    coordinator: "../bower_components/coordinator/coordinator",
    reqwest: "../bower_components/reqwest/reqwest"
  },
  packages: [

  ]
});

I've tried several different things and I've gotten the same error each time:

No file for module 'request' found

I feel that this is a pretty common problem and it would be fantastic to get an example that works. I have the same behavior working with Grunt, but I'd like to switch to gulp.

Is this something that should work with amd-optimize, or am I barking up the wrong tree?

[normanrz]

This is something that should work with amd-optimize. I usually put my bower_components folder in the public folder to avoid these file path issues.

But you could make it work otherwise. Maybe you can try setting the base directory explicitly:

    gulp.src(['src/main.js', 'bower_components/**/*.js'], { base: 'src' })
        .pipe(amdOptimize('main', {baseURL: 'src', configFile: 'src/require.config.js'}))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('public'));

[beatgammit]

Wow, that worked! Thanks!

I expanded out my test case to include a bower package with multiple files and it crashed looking for its dependencies. Package structure is like this:

• src
  • main.js - depends on tester
• bower_components
  • tester
  • tester.js - depends on lib/extra
  • lib extra.js

The error I'm getting is:

Error: No file for module 'lib/extra' found

I've tried putting extra.js next to tester.js but it still doesn't find it. Is this a bug or do I need to change something in my configuration.

[normanrz]

I guess tester.js should make the dependency relative ie. ./lib/extra. You can also overwrite this manually with the paths attribute in your require config. Might need to be an absolute path, though. Not sure.

[beatgammit]

I have it relative. Here's tester.js:

define(['./lib/extra'], function (extra) {
    console.log('Loaded extra:', extra);
});

When you say absolute, what do you mean? Absolute from /? From appDir? From baseDir? Or from the base of the module (bower_components/tester)?

[beatgammit]

I just tried it with an absolute path (from /), which works.

It seems that local relative links work (and there seems to be a test for it), but anything outside of the base passed into gulp.src isn't working properly. If I change the imports for my bower component to be relative to the base, then it works.

I could probably fix this with multiple gulp.src directives, but then I could potentially have naming conflicts. I don't understand gulp internals very well, but is this something that amd-optimize can possibly fix?

This seems like something in amd-optimize. Do you have any hints as to how to debug this? I'm willing to work on it if you give me a hint as to where to look.

[normanrz]

Ok, so the first thing I would appreciate is writing a test case for this. So I could jump in and help. Then it is probably about finding out how the dependency definition is being resolved: https://github.com/scalableminds/amd-optimize/blob/master/src/trace.coffee#L28-L47

[beatgammit]

Ok, I've created a PR (#25) that adds this type of test which currently fails for me.

[normanrz]

I just worked through your PR (thanks for sending that one!) and found the problem. Can you test the new version and see if it works for you?

[beatgammit]

Awesome! I'll try it out and report back (probably tomorrow).

[beatgammit]

Sorry for taking so long. This does in fact fix my problem.

I had a problem with when.js, but I was able to remove it pretty easily. Thanks for fixing this!

[varlinor]

I have an js file in another directory, but my project need to import this file, structure is following: -webapp require.config.js static/modules/myModule/ moduleEntry.js dependencyA.js dependencyB.js ...... static/app/extend/widgetsDefine.js

and gulp script is like this:

gulp.task('build', function () { gulp.src([ 'static/app/extend/widgetsDefine.js', 'static/modules/myModule/.js', '!static/modules/myModule/.min.js'],{base:'static/modules/myModule/'}) .pipe(amdOptimize("static/modules/myModule/moduleEntry", { baseUrl:'static/modules/myModule/', configFile:'main.js', exclude:[ 'static/modules/otherModules/moduleC', 'static/app/extend/widgetsDefine.js' ], findNestedDependencies:false })) .pipe(concat("moduleEntry-concat.js")) .pipe(gulp.dest("static/modules/myModule")) .pipe(rename("moduleEntry-concat.min.js")) .pipe(uglify()) .pipe(gulp.dest("static/modules/myModule")); });

then amd-optimize catch an error: Error: No file for module 'static/modules/myModule/moduleEntry' found.

so , How can I import a js file form a different directory?

waiting for answer sincerely

finally solved this problem, see #72