CODEWITHSUNDEEP
javascriptsystemjs
user656449
user656449

Reputation: 3032

How to import system js SFX library

I've compiled several js files into one SFX as described in https://github.com/systemjs/builder#example---common-bundles (although using '+' instead of '&', but this part seems to be working):

gulp.task('systemjs', ['copy-assets'], function(done){
  return new Builder({
    baseURL: '.',

    // opt in to Babel for transpiling over Traceur
    transpiler: 'traceur'

    // etc. any SystemJS config
  }).buildSFX('src/elements/my-test.js + src/elements/my-test2.js + src/elements/model/user.js', 'dist/elements.js')

      .then(function() {
        console.log('Build complete');

  }).catch(function(err) {
        console.log('Build error');
        console.log(err);
    });

});

but when i'm trying to import resulting js file I can't find any lib:

<script src="./bower_components/system.js/dist/system-csp-production.js"></script>

<script>

    System.import('elements.js').then(function(m) {
        console.log(m);//never invoked
    });
</script>

any help is highly appreciated!

UPDATE:

The only solution I found so far was to use sfxGlobalName and create 'special' js file containing references to all other files to be included and then include it into html:

all.js:

 import {MyTest} from 'src/elements/my-test.js';
    export var myTest = MyTest;
    
    import {MyTest2} from 'src/elements/my-test2.js';
    export var myTest2 = MyTest2;

index.html:

 <script src="./bower_components/system.js/dist/system-polyfills.js"></script>

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

then imported objects can be accessed like

elements.myTest

gulp:

gulp.task('systemjs', ['copy-assets'], function(done){
  return new Builder({
    baseURL: '.',

    // opt in to Babel for transpiling over Traceur
    transpiler: 'traceur'

    // etc. any SystemJS config
  }).buildSFX('src/elements/all.js', 'dist/elements.js', { sfxGlobalName: 'elements', minify: false, sourceMaps:false })

      .then(function() {
        console.log('Build complete');

  }).catch(function(err) {
        console.log('Build error');
        console.log(err);
    });

});

Is there any better way?

The sample app is on github:

git clone https://github.com/bushuyev/test_test.git
cd test_test
git checkout tags/1.0
npm install
bower install
gulp wct

Upvotes: 3

Views: 855

Answers (1)

Vyacheslav Cotruta
Vyacheslav Cotruta

Reputation: 772

You can not import the sfx bundle via System.import API as the module you are trying to import is already compiled, meaning it is wrapped according to the chosen format (es6, cjs, amd). Same behavior you will see when trying to import a compiled cjs file (eg. Through Browserify).

To be able to import the modules, you should better bundle them whithout SFX.

Upvotes: 1

Related Questions