在第三方非AMD库中使用AMD定义的模块

Use AMD defined module within 3rd party, non-AMD library(在第三方非AMD库中使用AMD定义的模块)
本文介绍了在第三方非AMD库中使用AMD定义的模块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个库-称为SomeLib-定义为支持各种模块加载器:

(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory();
    } else {
        global.UriTemplate = factory();
    }
})(this, function() {
   ...
   // returns constructor function
});

我可以使用RequireJS轻松加载它,如

require.config({
  paths: {
    'theLibrary: '../path/to/the/lib'
  }
});

然后我有另一个第三方库-称为AnotherLib-它在内部使用SomeLib,如

var the Lib = new SomeLib(...);

这意味着SomeLib必须全局可用。

AnotherLib只是一个普通的JavaScript模块函数

(function(){
  // the code
})();

它与特定的模块加载器不兼容。

当我将AnotherLib包含在RequireJS中时,我会执行如下操作

require.config({
  paths: {
    'theLibrary: '../path/to/the/lib',
    'anotherLib: '../path/to/anotherLib'
  },
  shim: {
     'anotherLib: [
        'theLibrary'
     ]
  }
});

问题是我在AnotherLib中实例化SomeLib(new SomeLib(...))的那一行上得到了一个未定义的异常。 这是因为SomeLib未在全局对象上定义,而是发布为AnotherLib不"需要"的AMD模块。

我是否可以以某种方式解决此问题,或者AnotherLib是否必须符合AMD并正确要求SomeLib。

AMD

最好的方法是获得一个符合推荐答案的库,或者使该库符合amd。后一种选择需要手动修改源代码,或者执行一个构建步骤,将不符合AMD的代码转换为真正的AMD模块。如何执行此操作取决于库的设计方式。

适用于任何库的一种方法是故意将库需要的符号泄漏到全局空间:

  1. 使anotherLib依赖于可以称为SomeLib-leak的新模块。

  2. 创建新模块。此定义不必位于单独的文件中。我通常在调用require.config之前放置这样的"粘合"模块。该模块将如下所示:

    define('SomeLib-leak', ['SomeLib'], function (SomeLib) {
        window.SomeLib = SomeLib;
    });
    

    我确实特意让define在这里设置了模块名称。通常,您不希望调用hasdefine设置模块名称,但是对于像我上面指出的那样放置的"粘合"模块,这是必要的。

    /li>

加载anotherLib时,SomeLibrary将进入全局空间。

这篇关于在第三方非AMD库中使用AMD定义的模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)