I am looking for a way to dynamically load dependencies using System.import(), without the need to transpile ES6 to ES5 at production runtime. My goal is to have these modules transpiled into separate ES5 modules that are only fetched when necessary, rather than being part of the main bundle.
Development Workflow
The concern arises from my production build where modules are loaded, potentially including dependencies that require transpilation. To address this, I utilize a workflow involving jspm bundle and jspm unbundle to switch between development and production configurations. In the development environment, the following scripts are included:
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('src/main');
</script>
Production Workflow
For production, I employ jspm bundle --inject to inject the bundles option into System.config, loading only the required files:
system.js
config.js
main.bundle.js
During production, when asynchronously loading a module with System.import(), it loads successfully, indicating in-browser transpilation.
Queries
While building each module into AMD format is straightforward, how can I still fetch them separately and asynchronously with
System.import()?In efforts to minimize browser overhead by avoiding transpilation scripts, is there a method to include
system.jswithout transpilation capabilities?