- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试转换我们的 requirejs
调用 SystemJS
,但我不确定自己做错了什么。
我们原来的调用是这样的:
return function(callback) {
requirejs(["/app/shared.js"], function(result){
callbackFunction = callback;
callback(dashboard);
main();
})
}
我正在尝试的是:
return function(callback) {
console.log(callback.toString())
SystemJS.import('app/shared.js').then(function(result){
callbackFunction = callback;
callback(dashboard);
main();
});
}
我不得不删除一些前导 /
让东西正确加载,这很好,但我现在遇到了一个问题,即在 shared.js
顶部定义的变量在我的本地 main.js
中不可见文件。在我的浏览器控制台中,我得到:
Potentially unhandled rejection [1] ReferenceError: dashboard is not defined
shared.js
定义 dashboard
:
var dashboard = { rows: [], }
// Other definitions...
define(["/app/custom-config.js", /* etc */]);
我想我有两个问题:
requirejs
的正确方法吗?电话?shared.js
无障碍?要获得更完整的图片,main()
只需设置 dashboard
对象,然后调用 callbackFunction(dashboard)
在上面。
最佳答案
您的问题可以简化为以下情况,您有两个 AMD 模块,一个泄漏到全局空间,第二个试图使用第一个泄漏的内容。如以下两个模块。
src/a.js
需要泄漏的模块并取决于该模块泄漏的内容:
define(["./b"], function () {
console.log("a loaded");
callback();
});
src/b.js
泄漏到全局空间:
// This leaks `callback` into the global space.
var callback = function () {
console.log("callback called");
}
define(["./b"], function () {
console.log("b loaded");
});
有了 RequireJS,上面的代码就可以工作了。哦,它设计得很糟糕,因为 b.js
不应该泄漏到全局空间中,但它会起作用。您将在控制台上看到 调用的回调
。
使用 SystemJS,上面的代码将不起作用。为什么? RequireJS 通过将 script
元素添加到 header 来加载模块,并让 script
执行模块的代码,因此 callback
确实最终出现在全局空间中如果您使用指向您的脚本的 src
属性编写了自己的 script
元素,其方式将相同。 (你会得到一个“不匹配的匿名定义”错误,但这是一个单独的问题,不需要在这里耽搁我们。)SystemJS,默认情况下,使用 eval
而不是创建 script
元素,这会改变代码的计算方式。 通常,这无关紧要,但有时却很重要。在手头的情况下,callback
不会在全局空间中结束,并且模块 a
失败。
最终,您的 AMD 模块应该被编写成它们不会使用全局空间来相互传递信息。
但是,还有另一种解决方案可以用作最终解决方案的垫脚石。您可以使用 scriptLoad: true
告诉 SystemJS 使用 script
元素,就像 RequirejS 那样。 (有关详细信息和注意事项,请参阅 meta
上的文档。)这是执行此操作的配置:
System.config({
baseURL: "src",
meta: {
"*": {
scriptLoad: true, // This is what fixes the issue.
}
},
packages: {
// Yes, this empty package does something. It makes `.js` the
// default extension for modules.
"": {}
},
});
// We have to put `define` in the global space to
// so that our modules can find it.
window.define = System.amdDefine;
如果我在没有 scriptLoad: true
的情况下运行我在此处给出的示例代码,则模块 a
无法调用回调。使用 scriptLoad: true
,它可以调用回调,然后我进入控制台:
b loaded
a loaded
callback called
关于javascript - 用 systemjs 替换 requirejs——变量在本地范围内不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47681070/
当我使用以下命令设置 jspm 安装时: jspm init 然后它只询问我初始配置: Would you like jspm to prefix the jspm package.json prop
我正在使用标准的 ngUpgrade 模块将 AngularJS 应用程序升级到 Angular。我已将服务转换为 Angular,我需要将其降级以便在现有的 AngularJS 模块中使用它。我正在
我正在 SystemJS+Typescript 环境中运行 Jasmine 测试(基本上 a plunk 这应该是 Angular 2 测试平台)。 Jasmine 有意用作全局库,而不是通过 Typ
我有一个没有安装 systemJS 的项目。 这是 package.json: { "name": "mytest", "version": "0.1.0", "private": tru
我使用 SystemJS 作为模块系统来编译 TypeScript 文件,但每当我在浏览器中加载页面时(通过 live-server ),我都会收到以下错误: ReferenceError: Sens
我正在尝试将我的应用程序与 webpack 捆绑在一起,然后将其包含在带有 SystemJS 的父应用程序中,我有点迷失了。 我已经创建了我的包,我已经尝试将它转换为 commonjs/umd/amd
我无法让 systemjs 工作,所以它解析节点模块。 我的 index.html 中有以下内容: System.import('blast/test') .the
我正在尝试遵循 Angular 2 设置指南,但遇到了问题。我正在使用 browsersync,我似乎无法弄清楚如何让这段代码工作。 ....... System.import('./a
有没有办法等到所有 System.register(从 ES6 转译而来)都被解析和加载? 这对于 e2e testing in Angular 特别有用和其他小东西。 最佳答案 System.imp
我有一个非常基本的 config.js文件按预期工作,只要它部署在根 URL 下。这是样本 config.js文件: System.config({ //use typescript for co
我想导入 Angular,实例化 AngularJS 模块,然后导入另一个需要实例化 Angular 的文件: import angular from 'angular'; var app = ang
在尝试让 Angular (1.x) 与 systemjs 一起工作时,我意识到目前没有能力(据我所知)自动将 $inject 插入到 Angular 组件中,这使得即使函数的参数被缩小器破坏,组件也
我正在使用 jspm 和 SystemJS 导入 ES2015 模块。 是否可以通过 System 对象或其他任何地方获取项目中所有导入模块的列表?我可以通过 System._loader.modul
我正在使用 JSPM、AngularJS、TypeScript、SystemJS 和 ES6 并且我的项目运行得很好......除非我尝试使用 momentJS。 这是我得到的错误: TypeErro
有人可以告诉我如何使用 SystemJS 将简单的 javascript 文件加载到浏览器中。 我正在尝试使用以下语法从我的node_modules文件夹加载jquery: packages: {
我在使用 systemjs-builder 构建我的应用程序时遇到问题。 这是我的应用程序的结构。 这是要构建的函数: var systemjsBuild = { map: {
有人让 SystemJS 和 SignalR 一起工作吗?我一直在尝试使用 SystemJS(来自 jspm)加载 SignalR,但无论我做什么,异步加载器总是存在竞争条件。大约一半的加载时间,Si
我正在使用 Angular2,并且我想包含 jQuery。 systemjs.config.js (function (global) { System.config({ paths: { '
我在所有项目中都使用 SystemJs 和 JSPM,感觉太棒了。使用前端库变得前所未有的简单,使用 JSPM 我可以通过几个简单的步骤来完成: 命令行:jspm 安装角度 index.ts|js:i
我无法使用 SystemJS (0.19.47) 正确加载 RxJS 基本上我有一些 TypeScript…… import {BehaviorSubject} from "rxjs"; let s
我是一名优秀的程序员,十分优秀!