이것은 왜 requireJS에서 "Mismatched anonymous define()"이 발생합니까?

Question

내가 코드를 아래에 볼 수있는 모듈이라고 classie.js, 사용하고

:

/*! 
* classie - class helper functions 
* from bonzo https://github.com/ded/bonzo 
* 
* classie.has(elem, 'my-class') -> true/false 
* classie.add(elem, 'my-new-class') 
* classie.remove(elem, 'my-unwanted-class') 
* classie.toggle(elem, 'my-class') 
*/ 

/*jshint browser: true, strict: true, undef: true */ 
/*global define: false */ 

(function(window) { 

'use strict'; 

// class helper functions from bonzo https://github.com/ded/bonzo 

function classReg(className) { 
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
} 

// classList support for class management 
// altho to be fair, the api sucks because it won't accept multiple classes at once 
var hasClass, addClass, removeClass; 

if ('classList' in document.documentElement) { 
    hasClass = function(elem, c) { 
    return elem.classList.contains(c); 
    }; 
    addClass = function(elem, c) { 
    elem.classList.add(c); 
    }; 
    removeClass = function(elem, c) { 
    elem.classList.remove(c); 
    }; 
} 
else { 
    hasClass = function(elem, c) { 
    return classReg(c).test(elem.className); 
    }; 
    addClass = function(elem, c) { 
    if (!hasClass(elem, c)) { 
     elem.className = elem.className + ' ' + c; 
    } 
    }; 
    removeClass = function(elem, c) { 
    elem.className = elem.className.replace(classReg(c), ' '); 
    }; 
} 

function toggleClass(elem, c) { 
    var fn = hasClass(elem, c) ? removeClass : addClass; 
    fn(elem, c); 
} 

var classie = { 
    // full names 
    hasClass: hasClass, 
    addClass: addClass, 
    removeClass: removeClass, 
    toggleClass: toggleClass, 
    // short names 
    has: hasClass, 
    add: addClass, 
    remove: removeClass, 
    toggle: toggleClass 
}; 

//transport 
if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(classie); 
} else { 
    //browser global 
    window.classie = classie; 
} 

})(window); 

내가 HTML에 쓴 :

<script data-main="js/main.js" src="bower_components/requirejs/require.js"></script> 
<script src="js/classie.js"></script> 

그런 다음 브라우저가 불평을 :

[Error] Error: Mismatched anonymous define() module: [object Object] 
http://requirejs.org/docs/errors.html#mismatch 
    defaultOnError (require.js, line 141) 
    onError (require.js, line 545) 
    intakeDefines (require.js, line 1229) 
    (anonymous function) (require.js, line 1416) 

나에게 이상한 점은 classie.js의 마지막 줄입니다.

//transport 
if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(classie); 
} else { 
    //browser global 
    window.classie = classie; 
} 

define이 기능인지 테스트하고 사용하기 전에 amd 속성을 가지고 있기 때문에 classie.js은 AMD과 호환되도록 노력하고 있습니다. 그러나 불행하게도 이것은 브라우저에서 오류를 일으켰습니다. requirejs은 AMD를 구현하는 가장 유명한 라이브러리입니까? 왜 작동하지 않습니까?

Answer 1

발견 한대로 classie는 AMD 로더를로드하도록 설계되었습니다. 따라서로드 할 때 AMD 로더가 존재 함을 감지하고 define을 호출합니다.

문제는 사용자가 script 요소를 사용하여로드하려고하는 것입니다. AMD 모듈은 직접 script을 통하지 않고 로더을 통해로드해야합니다. 이런 이유로 당신은 당신이 얻고있는 착오 알림말을 얻고있다.

Answer 2

는 그냥 AMD 검사를 주석 정규 방법이라고

/* 
// transport 
if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(classie); 
} else { 
    // browser global 
    window.classie = classie; 
} 
*/ 
window.classie = classie;