我如何使用 SystemJS Builder buildStatic?

How do I use SystemJS Builder buildStatic?

我正在尝试通过构建 SFX 包来使用 SystemJS Builder 做一个简单的示例,但我无法让它工作。我不知道如何调用包中的导出函数。我是否遗漏了一些明显的东西?

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();
});

导出 all 函数并不意味着它可以被全局对象访问(window 在浏览器中)。 这只是意味着它可以使用加载的模块(例如 systemjs)导入。 创建 self-executing 包时,您应该只在浏览器中加载包文件(就像您已经做的那样),并在将要包含在包中的 js 文件中进行所有引导。

如果您确实需要访问该脚本标记中的所有函数,则必须将该函数添加到全局对象中。 在你的 app.js

window.all = all;

但我不认为这是它的预期使用方式。