我如何使用 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;
但我不认为这是它的预期使用方式。
我正在尝试通过构建 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;
但我不认为这是它的预期使用方式。