Production workflow with SystemJS and external dependencies hosted via CDN

Question

I'm trying to figure out a good production workflow that plays nice with the development workflow. The need is to exclude 1MB of external libraries from the build, then use a CDN to host them separately. So we have this:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="build.js"></script>
<script>
    System.import('app/main.js');
</script>

This is nice, anything in main.js is ignored as it was already included in build.js. Although I guess this means when it is time to go back to development hot building, we have to delete build.js prior?

So now I want to separate the external dependencies for production:

builder.buildStatic('app/main.js', 'build.js', {
  externals: ['jquery'],
  globalName: 'App',
  globalDeps: {
    'jquery': 'jQuery'
  }
});

When we do this, we are required to add the line:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2 jquery.min.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="build.js"></script>
<script>
    System.import('app/main.js');
</script>

Which means that when we switch back to the development build, jQuery will be double bundled into main.js? Then there is the snippet from SystemJS:

System.config({
    bundles: {
      'build/core': ['jquery']
    }
});
System.import('app/main.js');

Not sure how to use this as now we wouldn't be using a CDN to host the jQuery. So to me it kind of feels like a catch 22. The JSPM is great because it gives you package management, but to use the packages in production you want them externally. So if we have to include the script tags anyway in the page, then doesn't that defeat the purpose of JSPM in the first place?

Any ideas on how to make a nice and easy development / production workflow, where when we want to switch between the two we don't have to change the code? We want something like:

$ npm run production

$ npm run development

This, without any need to change any kind of HTML in the page prior to running the two. I've looked for hours over the different SystemJS and JSPM workflows and can't seem to find one that addresses all of the issues.

Is SystemJS being used in production anywhere, or is this still being considered an experimental technology? I've seen there is a new and coming standard with HTTP/2 where it will dynamically load modules on the fly, so does this means it's switch to SystemJS or got left in the dust?

Maldon

Answer 1

I haven't used systemJS to bundle things before but does mapping the CDN for jquery work? i.e. You can use a CDN for angular and rxjs via:

map: {
    ...
    '@angular': 'https://npmcdn.com/@angular',
    'rxjs': 'https://npmcdn.com/[email protected]',
    'jquery': 'http://jquery.cdn'
}

Does something like this solve the issue for you? I gather it means that you won't be able to use jquery as a global and will need to import it, but moving to a workflow like this might be helpful?

Logorrhea