These are chat archives for systemjs/systemjs

15th
Dec 2016
Sindre Johansen
@sindreij
Dec 15 2016 13:21
Hello! I have a use case, I want to concatinate transpiled ES6 modules and CJS modules at run-time to a bundle that is delivered as a script tag. The concationation is done at the server side, and it works. I concatinate files I have transbiled using babel to transform using transform-cjs-system-wrapper or transform-es2015-modules-systemjs. However, to run this bundle I need a minimal set of systemjs. Which systemjs disrobution is the smallest and use modules with both register and registerDynamic. I have tried dist/system-register-only.js, and it works. But it looks like systemjs-builder uses its own bundles in its template directory for its sfx bundles, and that looks even smaller. What is the difference between the distrobutions in systemjs/distand in builder/templates? Could I use the sfx templates for this use case? I will probably have two script-tags, one for the systemjs bundle, and one for the code bundle. And I might have more bundles in the future, but still want to just have one systemjs file.
Sindre Johansen
@sindreij
Dec 15 2016 13:50
Looking closer I see how the sfx template can only be used when everything is in the same file. How are the sfx template and the distrobutions in systemjs related. Are they two different implementations, or do they share some code?
Joel Denning
@joeldenning
Dec 15 2016 18:04
@sindreij My understanding is that the sfx template is to make built code compatible with as many module loading formats as possible
It has some $__System checks to see if it’s running in an env with systemjs
It also checks for define, if you’ve built things to an AMD format
When it is just <script> tagged, it does have an extremely minimalistic version of a systemjs-like module loader
You can call register and registerDynamic on it
I am curious about your use case, though. Why not just do a builder.bundleSFX() or a jspm build?
That compiles everything down at build-time, and puts it all in one file that can be <script> tagged even without having SystemJS on the page
Todd Thomson
@ToddThomson
Dec 15 2016 21:37
Hi, first time using gitter. I've just started using systemjs and have converted a requirejs gulp build pipeline to use systemjs-builder. I got this working properly, but I needed to use 2 system.config.js files. I needed to do this as the bundled app was moved to a different directory structure. I'm pretty sure I've missed something as I prob don't need 2 configuration files?
The difference in the 2 config files was only the "map" section.
Joel Denning
@joeldenning
Dec 15 2016 21:41
@ToddThomson are you using both of the two system.config.js files to bundle? Or is one of them used just once the app is already bundled?
Another related question: are you doing bundle()? Or bundleSFX()
Todd Thomson
@ToddThomson
Dec 15 2016 21:45
@joeldenning I am using the system.config.js that is in /src/ within my gulp build pipeline. This uses a map for "app" to "app/bundles". The 2nd system.config.js is concatenated with systemjs and put into /dist/js/lib.js. The bundled app is put into /dist/js/app.js.
@joeldenning I am using var builder = new systemBuilder( 'src', './src/systemjs.config.js' );
return builder.buildStatic( 'app', 'dist/js/app.js' )
  .then( function() {
  } )
  .catch( function( err ) {
      console.error( '>>> [systemjs-builder] Bundling failed'.bold.green, err );
  } );
Joel Denning
@joeldenning
Dec 15 2016 21:46
buildStatic is the same thing as bundleSFX (bundleSFX is the old name for it)
How are you loading your bundle file? With <script src=“dist/js/app.js”></script>?
Or with System.import(‘dist/js/app.js’)
Todd Thomson
@ToddThomson
Dec 15 2016 21:48
<script src="js/libs.js"></script>

<script src="js/app.js"></script>

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
js/libs is systemjs + system.config.js
Joel Denning
@joeldenning
Dec 15 2016 21:49
Is app different than js/app.js?
I guess what I am getting at is that if you do buildStatic, then you don’t need to include SystemJS or the system.config.js at all
Todd Thomson
@ToddThomson
Dec 15 2016 21:51
Yes it is different for testing/dev in /src and prod which is /dist/js.
Joel Denning
@joeldenning
Dec 15 2016 21:53
If you only have one bundle, and you’re doing it with buildStatic, then you should be able to <script src=“static-build.js”></script> without having to include SystemJS or system.config.js (in your lib.js)
So that is one option. But if you’d like to load it with System.importinstead of <script>, then that is okay too. For that, case we would need to dig into the differences in the “map” section of your two system.config.js files
Todd Thomson
@ToddThomson
Dec 15 2016 21:54
OK. I'll give that a try. ( eliminating the sysytem.config.json in the libs.js ). What you are suggesting seems correct and how I would like it to work.
Joel Denning
@joeldenning
Dec 15 2016 21:55
:thumbsup: let me know if it doesn’t work.
Also if you’d like to stick with loading it via System.import, I can try to help figure out what’s going on with the “map” portion of your system.config.js
Todd Thomson
@ToddThomson
Dec 15 2016 21:56
OK. I would also like to remove:
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
Todd Thomson
@ToddThomson
Dec 15 2016 22:05
@joeldenning your suggestion did not work for me. My bundled app only contains the code from my app. There is no systemjs code in the bundle.
Joel Denning
@joeldenning
Dec 15 2016 22:05
What does your html file look like now?
Todd Thomson
@ToddThomson
Dec 15 2016 22:06
Here is the development config file:
( function( global ) {
System.config( {
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// the app folder
app: 'app'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'app.js',
defaultExtension: 'js'
}
}
} );
} )( this );
Here is the one that I was concatenating with systemjs:
( function( global ) {
System.config( {
// map tells the System loader where to look for things
map: {
// our app is within the js folder
app: 'js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'app',
defaultExtension: 'js'
}
}
} );
} )( this );
Here is the HTML index file:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript Greeter HTML App</title>
<link rel="stylesheet" href="css/css.css">

<script src="js/libs.js"></script>

<script src="js/app.js"></script>



</head>
<body>
<h1>TypeScript Greeter HTML App</h1>
<ul>
<li>Bundled and Minified using TsBundler</li>
<li>Single UMD module; SystemJs loader</li>
</ul>
<div id="content"></div>
</body>
</html>

Joel Denning
@joeldenning
Dec 15 2016 22:09
In your html file, you should be able to remove js/libs.js
With a static build, you do not need SystemJS at all, unless your static build subtracts out certain dependencies
Todd Thomson
@ToddThomson
Dec 15 2016 22:10

gulp.task( 'bundle', ['ts'], function() {

var builder = new systemBuilder( 'src', './src/systemjs.config.js' );

return builder.buildStatic( 'app', 'dist/js/app.js' )
  .then( function() {
  } )
  .catch( function( err ) {
      console.error( '>>> [systemjs-builder] Bundling failed'.bold.green, err );
  } );

} );

This gulp task does not create a SFX bundle for me.
Joel Denning
@joeldenning
Dec 15 2016 22:12
How so? Your gulp task ^^ uses buildStatic which is a self executing bundle
I must be missing something — why isn’t it a static build?
Todd Thomson
@ToddThomson
Dec 15 2016 22:13
Yes, I just checked you doc link and it should be creating an SFX bundle. Perhaps it is due to the fact that I am providing just "app" which is then mapped and not a direct file path?
Joel Denning
@joeldenning
Dec 15 2016 22:14
Hmm.. I don’t think that is it.
What is the error you get in the browser?
Todd Thomson
@ToddThomson
Dec 15 2016 22:24
The app.js bundle created with buildStatic() is only 3KB. Is there some magic involved to then load systemjs?
Is there some bootstrapping happening or should the bundle include systemjs?
Joel Denning
@joeldenning
Dec 15 2016 22:27
The bundle does not include systemjs
self executing bundles do not need to have systemjs in the browser with them
So they’re nice and small
Todd Thomson
@ToddThomson
Dec 15 2016 22:32
Nice. I'll have to read up on how that works.
Todd Thomson
@ToddThomson
Dec 15 2016 22:37
I am using Typescript and transpiling to UMD modules. I read that systemjs supported this format.
Todd Thomson
@ToddThomson
Dec 15 2016 23:25
@joeldenning Thank-you for your help. I figured out the problem and now better understand the SFX bundle build. The issue was not the buildStatic() call. The problem was with the app. The app was attempting to update a document element by using document.getElementById("content") which was returning undefined. When using systemjs to load the module I didn't run into this issue. I will just need to determine when the document is ready when using the SFX bundle build.
Joel Denning
@joeldenning
Dec 15 2016 23:43
:thumbsup: glad you got it working!