为什么向文件添加"import"会导致"require.config()"调用不再有效?



在我将设置应用于require.config的文件中,我还放置了其他设置,包括使用打字稿的导出功能导入视图模型。我注意到它在所有浏览器中都产生了错误:

requireConfig.ts

import HomePage from "Custom/HomePage";
require.config
({
baseUrl: "/Scripts/",    
paths: {},
shim: {}
});
require (["Custom/Initialisation/ConfigOnDocReady"]);

Uncaught TypeError: require.config is not a function at Object.<anonymous> (RequireConfig.ts:3)

当我删除第 1 行时,它可以工作。是什么原因造成的?我认为这是一个很好的机会,可以了解requireJs的幕后情况。

总结

RequireJS在本地和全球范围内提供require。您正在本地提供的require上呼叫config。本地require没有config方法,并且您得到得到的错误。应根据全局要求调用config。RequireJS 将别名导出为全局require作为requirejs,或者您可以window.require访问它。

长篇大论

RequireJS的本地和全球require调用

RequireJS提供了两个访问require点:全局访问点和本地访问点。在浏览器中,全局的导出到全局空间中,window.如果在调用define时在依赖项列表中专门请求本地require作为模块。调用define是向 AMD 加载程序注册 AMD 模块的标准方法(这就是 RequireJS)。这里回调的参数是一个本地require

define(['require'], function (require) {
});

(如果您完全省略依赖项列表,它也会自动提供给回调,但这种情况不需要在此处扣留我们。

本地require不提供config方法。如果这样做就没有多大意义了,因为打电话给config具有全球影响。例如,没有规定仅更改上下文中的某些模块而不能更改其他模块的baseUrl。所以 RequireJS 只在全局require上提供了config方法。

">

但是等等",你说,"我不会在任何地方打电话给define

否,但 TypeScript 正在发出调用define的代码。

TypeScript 如何发出代码

删除import时,代码将正常工作,因为 TypeScript 会根据代码是否存在输出明显不同的代码:

  1. 当您拥有import语句时,您的代码将包装在类似于我上面显示的define中,因此,您对require的调用是对本地语句的调用。(tsc生产的define包装器更复杂,但这在这里并不重要。

  2. 如果没有import/export语句,则代码被视为"脚本",TypeScript 不会输出任何与模块相关的代码。特别是,发出的代码不会有我上面显示的define包装器,您对require的调用是对全局包装器的调用。

结果

如果要从模块内部更改配置,则应注意调用全局require。RequireJS 也以requirejs别名导出它。所以你可以打电话给requirejs.config.或者,您可以通过window作为window.require显式访问它。

最新更新