requirejs and pre-built bundles

Question

I can't get bundles to work in the optimized build, I'm trying to load some external pre-built bundle (not included in the require build process output).

In requirejs.config:

paths: {
    'mymodules': '../lib/test-bundle/test-bundle'
},
bundles: {
    'mymodules': ['mymodule1', 'mymodule2']
}

test-bundle content is:

console.log("defining modules...");

define('mymodule1', ['jquery'], function($) {
    console.log('within mymodule1', $.fn.jquery);
    return {
        test: 'module1'
    };
});

define('mymodule2', ['jquery'], function($) {
    console.log('within mymodule2', $.fn.jquery);
    return {
        test: 'module2'
    };
});

In the build config paths for mymodules, mymodule1 and mymodule2 are set to empty: (or the build process fail), I'm not using the modules option in the build config to generate bundles.

If I use the sources as they are everything is working fine, as expected.

In the built version (but not optimized) test-bundle is loaded and "defining modules" printed, then timeout loading mymodule2:

Error: Failed to load root module (viewmodels/shell). Details: Load timeout for modules: mymodule2(…)
Uncaught Error: Failed to load root module (viewmodels/shell). Details: Load timeout for modules: mymodule2
http://requirejs.org/docs/errors.html#timeout

In the built and optimized version there's one more error:

Uncaught ReferenceError: define is not defined

like if test-bundle is loaded before requirejs implement define().

What I'm missing or doing wrong?

edit

I've created a branch with the test above to install and build (nodejs npm and probably grunt-cli are required on the system)

git clone https://github.com/xenogenesi/HTMLStarterKitPro
cd HTMLStarterKitPro
git checkout test-bundle
# nodejs npm required on the system (maybe grunt-cli)
npm install # required only once to install node modules
grunt build-only # create a build/ directory and the content
php -S localhost:8888 # to publish the sources as they are
# browse to http://localhost:8888
php -S localhost:7777 -t build # to publish the built versions
# browse to http://localhost:7777 for built but not optimized
# browse to http://localhost:7777/index2.html for built optimized

(see this commit for all files modified to add the test-bundle)

An [mcve] would be helpful. Also, what version of RequireJS are you using? Newer versions fix bugs present in the older ones. — Louis, Apr 29 '16 at 10:37
@Louis, providing a minimal example would require a time effort and the environment wouldn't be the same, so, please see the update, if you know how to install node, npm, grunt-cli should be fast and easy. RequireJS version is 2.2.0 — Alex, Apr 29 '16 at 12:57

score 0 · Answer 1 · answered Apr 29 '16 at 02:33

0

You can only use one define per file. If you want to use anyway, there is a bundle configuration option that you can say that a module is inside an already bundled file as yours.

As it states:

 bundle config is for pointing multiple module IDs to a bundle's module ID.

answered Apr 29 '16 at 02:33

Walter Macambira

2,574
19
28

Thanks, I've fixed my config to use a *module ID* instead of a path and added it on `paths`, but the result doesn't change, I'll update the question – Alex Apr 29 '16 at 07:45

score -1 · Answer 2 · answered Apr 29 '16 at 17:55

So, apparently even being require.js itself, the loader once included in the optimized version is or at least behave in a different way.

One simple way to get it working is to not include any loader and keep using require to kickstart:

Gruntfile.js:

- name: 'requireLib',
+ name: false,

index2.html:

- <script src="app/main-built.js"></script>
+ <script src="lib/require/require.js" data-main="app/main-built"></script>

Still, if somebody know how to include the loader and get pre-built external bundles (multiple modules in one file) working, I'd like to know and will accept as answer.

requirejs and pre-built bundles

2 Answers2