编写Requirejs模块，无需requirejs即可运行 [英] Write Requirejs modules that work without requirejs

问题描述

我想以某种方式创建我的模块，它们可以与requirejs一起使用（不需要js，它们应该正常工作，所以我必须确保它们正确加载，就像把脚本标签放在右边订单）。

I would like to create my modules in a way, that they can be used with and without requirejs (without require js they should just work normally, so I have to make sure they load correctly, like putting script tags in the right order).

所以jQuery就是这样的：

So jQuery does it kindof like this:

// export module
if ( typeof define === "function" && define.amd ) {     
    define(["dep"], function(dep){
        dep.fn.test = test;
        return dep;
    });
}
else{ 
    dep.fn.test = test;
}

实际模块定义如下

var dep = function(...){...}

这个定义和出口部分属于IIFE，以保证一切都不在全球范围内。

This definition and the export part is within an IIFE to keep everything in out of the global scope.

一般来说，它适用于一个异常，依赖项不可用。
这个问题可以通过在define部分中定义函数来解决，但这意味着在定义部分中定义它两次，在else部分定义下面。

Generally it works well with one exception, the dependency is not available. This problem can be solved by defining the function within the define part, but this would mean defining it twice, in the define part and below in the else part.

我怎样才能让它工作但只定义一次模块？

How can I get this to work but only define the module once?

我对核心dep的插件式扩展应该都是在单独的文件中，所以主dep必须作为依赖性传递

这很好用btw。但这意味着我要编写测试代码两次。

This works fine btw. but it would mean I write the code for test twice.

(function(){
    // export module
    if ( typeof define === "function" && define.amd ) {     
        define(["dep"], function(dep){
            dep.fn.test = function(){...ssomething using dep...};
            return dep;
        });
    }
    else{ 
        dep.fn.test = unction(){...ssomething using dep...};
    }

})

好的，我尝试了另一个例子

Okay, I try another example

animate / animate.js （这是我的主文件）

define(function(){
  ...
  return animate;
});

animate / modules / easing.js （这是一个模块文件）
（function（）{
var ease = function（）{
//使用来自animate.js的动画主函数
// animate在这里不可用
。 ..
};

animate/modules/easing.js (this is a module file) (function(){ var ease = function(){ // using animate main function from animate.js // animate is not available here ... };

if ( typeof define === "function" && define.amd ) {
    define(["animate/animate"], function(animate){
      // animate is available here
      ...
     animate.fn.ease = ease;
     return animate;
    });
}
else
{
    // if no requirejs, animate is global
    animate.fn.ease = ease;
}
});

推荐答案

实际问题似乎是 define 在IIFE中不可用，但 window.define 是。因此，将定义作为IIFE的参数传递可以解决问题。

The actual problem seems to be that define is not available within the IIFE but window.define is. So passing define as an argument to the IIFE solves the problem.

(function(define){
    // export module
    if ( typeof define === "function" && define.amd ) {     
        define(["dep"], function(dep){
            dep.fn.test = function(){...ssomething using dep...};
            return dep;
        });
    }
    else{ 
        dep.fn.test = unction(){...ssomething using dep...};
    }

}(window.define))

在检查 define 之前，找不到它并立即尝试将其附加到dep.fn.test没有requirejs定义部分。

Before it would check for define, not find it and immediately try to attache it to dep.fn.test without the requirejs define part.

这篇关于编写Requirejs模块，无需requirejs即可运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！