These are chat archives for systemjs/systemjs

15th
Nov 2015
clintoncampbell
@clintoncampbell
Nov 15 2015 06:21

I’m running into a problem using JSPM/SystemJS with TypeScript as the transpiler that makes debugging rather difficult. When importing modules into my app, runtime errors will cause the script to fail silently (no runtime errors).

I’m able to make this work with an extremely simple setup.

app.js is loaded from a barebones index.html (loads system.js, config.js, and imports app.js). app.js contains two lines:

import $ from ‘jquery’;
console.log(undef_var);

Under these conditions, I see know errors in the Chrome dev tools, though errors reappear when I comment out the import statement. Code that’s free of runtime errors will work as intended and bring in the correct modules.

Any ideas? Debugging even a small script is quite a beast without any feedback from the compiler or runtime.

Seems to hold true with Babel as well. I imagine I’m doing something wrong. I can’t imagine this being a common bug. I’ve tried so far with Chrome 46.0.2490.80 and Safari 9.0.1. System.js is v0.19.5.
Alexander Kurakin
@kuraga
Nov 15 2015 16:20
Good day! Does SystemJS use Traceur or Babel? Why there is traceur in dependencies and no babel?
Matt
@mattfysh
Nov 15 2015 16:45
@kuraga it has both traceur and babel-core as devDependencies (presumably for testing compatibility)
Alexander Kurakin
@kuraga
Nov 15 2015 17:15
@mattfysh thanks! But why there is traceur in dependencies and no babel in builder? https://github.com/systemjs/builder/blob/master/package.json#L13
Matt
@mattfysh
Nov 15 2015 17:20
It looks like its using it to parse a syntax tree for e.g. AMD/cJS transformations
that part doesn't seem configurable, but you can still choose which to use for es6 modules
Alexander Kurakin
@kuraga
Nov 15 2015 17:30
@mattfysh thanks! I've just been confused that SystemJS is still using Traceur for this
Owen Densmore
@backspaces
Nov 15 2015 20:00

I'm trying to understand what appears to be three module loader workflows:

  • SystemJS: es6-module-loader > systemjs > jspm
  • Webpack
  • NPM: Browserify/Babelify

Pointers to the second two would be appreciated, but here I'm mainly interested in es6-module-loader & systemjs (I already use jspm).

What are simple static workflows for these two? I presume using babel first to compile to require() would be the most logical? And possibly work with legacy modules that use require() & es5?

Matt
@mattfysh
Nov 15 2015 20:24
@backspaces there are es6 plugins for both webpack and browserify, but at their core they are both CommonJS systems
JS now has an officially blessed module syntax which comes with quite a few features, and neither AMD or CommonJS can support all of these. IMHO - for future-proofing - it's better to now begin using the official spec for modules, and SystemJS has provided a module syntax that supports the new module system features in older browsers
ie. write ES6 modules, transpile them to System modules for ES3+ support.
Owen Densmore
@backspaces
Nov 15 2015 20:29
Thanks, good point. So my search is basically how to use systemjs in the simplest way. Would that be to use babel with the right configuration to fit in well with systemjs?
Matt
@mattfysh
Nov 15 2015 20:30
If using the system.js library which loads your modules as text via XHR, and transpiles them in the browser, it will try to detect when pulling in an ES module and load/use the right option.transpiler
if using the system-csp-production.js library which loads your modules using convention <script> tags (safer, and more performant as the browser can begin parsing the JS while it downloads)
then there is no auto-detection / conversion to systemjs module. you need to make sure your module have been transpiled to the right target formats before loading them with the <script> tag
Matt
@mattfysh
Nov 15 2015 20:36
this is where the system.js library (which includes transpiling) tells the browser which module format to transpile to: https://github.com/ModuleLoader/es6-module-loader/blob/master/src/transpiler.js#L57
the libraries in /dist are built using the makefile, you can see the difference in how systemjs loads modules versus how system-csp-production loads modules: https://github.com/systemjs/systemjs/blob/master/Makefile