Develop with live-compilation, bundle for production

[LordZardeck]

Is it possible to utilize System.js' transpiler feature to develop locally, then when ready, use aurelia-bundler to deploy? I can't figure out how to make that work, since in the config i specify to look in my src folder, but when it's bundled, it will be in a different folder, such as dist. Is this possible? if so, could someone show me an example config that supports this?

[atsu85]

It is possible, but not smth you want - too slow. For example i even bundle all 3rd party resources in development and leave my app code unbundled until going to production.

[LordZardeck]

@atsu85 Do you have an example of it working the way I'm describing?

Also, are you saying that you run bundle on your 3rd party resources, then do what I'm describing above for your source code? Because I could be down for that.

[EisenbergEffect]

We would recommend other build setups such as webpack of cli.

[atsu85]

@LordZardeck

Do you have an example of it working the way I'm describing?

NO! As I said:

It is possible, but not smth you want - too slow.

The development process with System.js transpiler (in browser) would be way-way-way too slow. For me even the default skeleton setup where in development mode You don't have anything bundled is too slow. So to waste less time on each refresh

i even bundle all 3rd party resources in development and leave my app code unbundled until going to production.

So to achieve that setup where only 3rd party assets are bundled (but not my app-specific code), i have budnles.js:

// based on https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript/build/bundles.js
module.exports = {
  "bundles": {
    "bundled-app": {
      "includes": [...],
      "options": {...}
    },
    "bundled-vendor": {
      "includes": [...],
      "options": {...}
    }
  }
};

and gulp tasks look smth like this:

// based on https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript/build/tasks/bundle.js
...
var config = { ...};
gulp.task('bundle', ['static',  'html', 'typescript'], function() {
  return bundler.bundle(config);
});

gulp.task('bundleVendor', ['unbundle', 'static',  'html', 'typescript'], function() {
  return bundler.bundle(getBundleConfig(config, "bundled-vendor")); // <-- WHAT SHOULD BE BUNDLED
});

gulp.task('unbundle', function() {
  return bundler.unbundle(config);
});

function getBundleConfig(config, bundle) {
    if(bundle) {
        for(someBundle in config.bundles) {
            if(bundle !== someBundle) {
                delete config.bundles[someBundle];
            }
        }
    }
    if(Object.keys(config.bundles).length < 1) {
        throw new Error("Didn't find bundle config by bundle name '" + bundle + "'");
    }
    return config
}

I hope it helps someone who wants to continue with jspm + SystemJS (as opposed to aurelia-cli that looks great as well or webpack that has its own pros and cons).

[LordZardeck]

The reason I want to do it regardless of speed, is conscience. Being able to have a coworker just run it without having to install some build process would be a huge win for us