These are chat archives for systemjs/systemjs

12th
May 2016
Christian S.
@Braincompiler
May 12 2016 04:50
Hi, I want to get systemjs and webpack bundles to get together, did anyone of you achieve this already? ATM I have a webpack bundling with multipple entries, which creates multiple "libraries", then I want to load such a bundle using System.import('mylib.bundle.js'), the file gets loaded and the promise resolves but the passed object is empty, the exported functions, classes and stuff is missed, with webpack2 (beta) I'm not able to bundle cause webpack trys to resolve the System.import statements by itself which will in turn not work since it can't find the modules, understandably. Has anyone an idea how I can get this to work together? My plan is ist to remove jspm which is not easy to handle in very big projects like the one I'm working ATM :) But I want to keep the System.import mechanism, thx in advance :)
Christian S.
@Braincompiler
May 12 2016 05:21
well, I guess I got it :) libraryTarget: 'commonjs2' in the output configuration of webpack seems to solve the problem :)
niabot
@niabot
May 12 2016 06:35

Do bundles have wildcard support? I guess i could write

bundles {
  'lib/asysform': [
    'asysform',
    'asysform/base',
    'asysform/collection',
    'asysform/i18n',
    ...
  ]
}

but this isn't fun to write at all if have to do that for every single module.

Ben Sandwick
@ben657
May 12 2016 07:25
@niabot if you're using jspm you can bundle with --inject to add it into your config automatically
niabot
@niabot
May 12 2016 07:56
@ben657 I just found out that systemjs supports wildcards within bundles. My config looks now like this:
System.config({
    map: {
        'is':     'lib/is.js',
        'jquery': 'lib/jquery-2.1.4.js'
    },
    bundles: {
        'lib/asysshop': ['asysshop', 'asysshop/*'],
        'lib/asysform': ['asysform', 'asysform/*']
    },
    packages: {
        'lib': {
            defaultExtension: 'js'
        }
    }
});

(function() {
    var config = {
        apibase: 'http://silex.asys'
    };
    System.import('asysshop').then(function(shop) {
        shop.start(config);
    }).catch(function(err) {
        console.log(err);
    });
})();

One main issue was that SystemJS can't handle the case where the bundle is named the same as the module. For example:

bundles: {
  'asysshop': ['asysshop', 'asysshop/*']
}

So i can't use baseURL: 'lib' because this would result in this case.

Ben Sandwick
@ben657
May 12 2016 07:59
Ah nice, good to know for when I get round to bundling too
niabot
@niabot
May 12 2016 08:37
One notice: This wildcards aren't deep. That means with this config you can import 'asysform/collection', but not 'asysform/ui/control'
You would have to add 'asysform/ui/*' as an additional entry to make it work.
See: systemjs/systemjs@b141c96
Anatol Ulrich
@spookyvision
May 12 2016 11:25
if I want to create a systemjs bundle where hbs templates are compiled in the process, how would I go about that? Caveat: I still need to customize the template context via Handlebars.registerHelper and Handlebars.registerPartial [unless by now there is a loader that can import partials, in which case I'd gladly use that (still leaves me with the registerHelper part)]