2016-01-15 4 views
2

Я пытаюсь сделать простой пример с помощью SystemJS Builder, создав пакет SFX, но я не могу заставить его работать. Я не могу понять, как вызывать экспортированные функции, которые были в комплекте. Мне что-то не хватает?Как использовать SystemJS Builder buildStatic?

index.html

<html> 
<head> 
    <script src="app.bundle.js"></script> 
    <script> 
     all(); 
    </script> 
</head> 
<body> 
</body> 
</html> 

gulpfile.js

var path = require('path'); 
var gulp = require('gulp'); 
var Builder = require('systemjs-builder'); 

gulp.task('default', function(cb) { 
    var builder = new Builder('.', './jspm.config.js'); 
    builder.buildStatic('src/app.js', 'dist/app.bundle.js').then(cb()); 
}); 

app.js

import { hello } from 'src/app/hello'; 

export function all() { 
    hello(); 
} 

hello.js

export function hello() { 
    console.log("hello"); 
}; 

Когда я пытаюсь загрузить index.html, он загружает файл app.bundle.js правильно, но я не могу понять, как вызвать all(), и я получаю Uncaught ReferenceError: all is not defined в Chrome.

Файл пакет выглядит разумным, я думаю:

// ... Some minified SystemJS content... 

(["1"], [], function($__System) { 

$__System.register("2", [], function (_export) { 
    "use strict"; 

    _export("hello", hello); 

    function hello() { 
     console.log("hello"); 
    } 

    return { 
     setters: [], 
     execute: function() { 
      ; 
     } 
    }; 
}); 

$__System.register('1', ['2'], function (_export) { 
    'use strict'; 

    var hello; 

    _export('all', all); 

    function all() { 
     hello(); 
    } 

    return { 
     setters: [function (_) { 
      hello = _.hello; 
     }], 
     execute: function() {} 
    }; 
}); 

}) 
(function(factory) { 

    if (typeof define == 'function' && define.amd) 
    define([], factory); 
    else if (typeof module == 'object' && module.exports && typeof require == 'function') 
    module.exports = factory(); 
    else 
    factory(); 
}); 
+0

Я не думаю, что это связано с вашей проблемой, но я думаю, что вы хотите '.then (cb)' вместо '.then (cb())'. Последний выполняет обратный вызов, как только выполняется '. Then'. Первый передает обратный вызов на '.then' и будет вызываться один раз, когда' buildStatic' разрешает. –

ответ

1

Экспорт функции all не означает, что он доступен глобальный объект (window в браузере). Это просто означает, что его можно импортировать с помощью загруженного модуля (например, systemjs). При создании самообучающегося пакета вам следует просто загрузить файл пакета в браузере (как вы уже это сделали) и выполнить всю загрузку в файлах js, которые будут находиться в комплекте.

Если вам действительно нужно получить доступ ко всей функции в этом теге скрипта, вы должны добавить функцию к глобальному объекту. в вашем app.js

window.all = all; 

Но я не думаю, что это способ его предполагается использовать.

Смежные вопросы