일치하지 않는 익명 정의() 모듈
웹 앱을 처음 검색할 때 이 오류가 발생합니다(일반적으로 캐시가 비활성화된 브라우저에서)
오류: 일치하지 않는 익명 정의() 모듈: 함수(필수) {
HTML:
<html>
.
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script> var require = { urlArgs: "v=0.4.1.32" }; </script>
<script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
<script src="assets/js/ace/ace.js?v=0.4.1.32"></script>
</body>
</html>
JS:
$(function () {
define(function (require) {
// do something
});
});
이 오류가 정확히 무엇을 의미하고 왜 발생하는지 아는 사람?
source file, github 이슈 페이지에서 그것에 대한 짧은 토론
Alien Webguy가 말했듯이, 문서에 따르면, require.js는 만약
- 자체 스크립트 태그에 익명 정의("(" 문자열 ID 없이 ()를 정의하는 모듈")가 있습니다).
- 이름이 충돌하는 모듈이 있습니다.
- loader 플러그인이나 익명 모듈을 사용하지만 require.js의 optimizer를 사용하여 번들링하지는 않습니다.
nequire.js modules와 build bundle을 함께 포함하는 과정에서 문제가 발생하였습니다.해결책은 다음 중 하나였습니다.
A. require.js를 로드하기 전에 스크립트 태그에 non-require.js 독립 실행형 번들을 로드하거나
B. 스크립트 태그 대신 require.js를 사용하여 로드합니다.
require.js로 시작하면서 나는 그 문제에 부딪혔고 초보자로서 문서들은 그리스어로 쓰여질 수도 있습니다.
제가 부딪친 문제는 대부분의 초보적인 예들이 문자열 ID를 사용해야 할 때 "익명 정의"를 사용한다는 것이었습니다.
익명의 정의
define(function() {
return { helloWorld: function() { console.log('hello world!') } };
})
define(function() {
return { helloWorld2: function() { console.log('hello world again!') } };
})
문자열 ID로 정의
define('moduleOne',function() {
return { helloWorld: function() { console.log('hello world!') } };
})
define('moduleTwo', function() {
return { helloWorld2: function() { console.log('hello world again!') } };
})
문자열 ID를 사용하여 define을 사용하면 다음과 같은 모듈을 사용하려고 할 때 이러한 오류가 발생하지 않습니다.
require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
moduleOne.helloWorld();
moduleTwo.helloWorld2();
});
스크립트 태그에 직접 포함된 다른 라이브러리와 함께 requirejs 파일을 함께 포함시켰기 때문에 이러한 오류가 발생했습니다.이러한 라이브러리(lodash와 같은)는 required의 정의와 충돌하는 정의 함수를 사용했습니다.requirejs 파일이 비동기적으로 로드되고 있어서 다른 라이브러리에서 require의 정의를 정의한 후에 require의 정의가 정의되었기 때문에 충돌이 발생한 것 같습니다.
오류를 제거하려면 requirejs를 사용하여 다른 모든 js 파일을 포함합니다.
문서별:
스크립트 태그를 HTML로 수동으로 코딩하여 익명 정의() 호출과 함께 스크립트를 로드하는 경우 이 오류가 발생할 수 있습니다.
HTML의 스크립트 태그를 수동으로 코딩하여 명명된 모듈이 몇 개 있는 스크립트를 로드한 다음, 익명 모듈을 로드하면 수동으로 코딩된 스크립트 태그가 로드하는 스크립트의 명명된 모듈 중 하나와 동일한 이름을 갖게 됩니다.
마지막으로 로더 플러그인 또는 익명 모듈( 문자열 ID 없이 ()를 정의하는 호출 모듈)을 사용하지만 Require를 사용하지 않는 경우JS optimizer를 사용하여 파일을 결합하면 이 오류가 발생할 수 있습니다.최적화자는 익명 모듈의 이름을 정확하게 지정하여 최적화된 파일에서 다른 모듈과 결합할 수 있도록 하는 방법을 알고 있습니다.
오류를 방지하려면:
Require(필수)를 통해 ()를 호출하는 모든 스크립트를 로드해야 합니다.JS API.HTML의 스크립트 태그를 수동으로 코드화하여 호출을 정의한 스크립트를 로드하지 마십시오.
HTML 스크립트 태그를 수동으로 코드화하는 경우 이름이 지정된 모듈만 포함하고 해당 파일의 모듈 중 하나와 동일한 이름을 가지는 익명 모듈이 로드되지 않았는지 확인합니다.
Loader 플러그인이나 익명 모듈을 사용하는 것이 문제이지만 Require(요구사항)JS 옵티마이저는 파일 번들링에 사용되지 않으므로 Require를 사용합니다.JS 옵티마이저.
기존의 답변은 문제를 잘 설명하지만, 사용 중이거나 사용하기 전에 스크립트 파일을 포함하는 것이 필요한 경우JS는 기존 코드 때문에 쉬운 옵션이 아닙니다. 스크립트 태그 이전에 창 범위에서 요구사항을 제거한 후 단어 뒤에 복원하는 약간의 해결책이 있습니다.저희 프로젝트에서는 서버측 기능 호출 뒤에 감겨 있지만 브라우저에서는 다음과 같은 내용을 볼 수 있습니다.
<script>
window.__define = window.define;
window.__require = window.require;
window.define = undefined;
window.require = undefined;
</script>
<script src="your-script-file.js"></script>
<script>
window.define = window.__define;
window.require = window.__require;
window.__define = undefined;
window.__require = undefined;
</script>
가장 깔끔하지는 않지만 효과가 있는 것 같고 굴절을 많이 절약할 수 있었습니다.
일부 브라우저 확장자는 페이지에 코드를 추가할 수 있습니다.제 경우에는 "Emmet in all text area" 플러그인이 있어서 requireJs를 망쳤습니다.브라우저에서 문서를 검사하여 추가 코드가 문서에 추가되지 않았는지 확인합니다.
또는 이 방법을 사용할 수도 있습니다.
- 코드베이스에 require.js를 추가합니다.
- 그런 다음 해당 코드를 통해 스크립트를 로드합니다.
<script data-main="js/app.js" src="js/require.js"></script>
require.js를 로드한 후 스크립트를 로드합니다.
했습니다 기반 에 대해 했습니다.require.js. 아래에 명시된 바와 같이MISMATCHED ANONYMOUS DEFINE() MODULEShttps://requirejs.org/docs/errors.html, 에서 이 오류는 여러 가지 원인이 있습니다. 제 경우에 흥미로운 것은 다음과 같습니다.If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer 보니 ,Google Closure컴파일러는 빌드하는 동안 자바스크립트 코드를 병합/최소화하는 데 사용되고 있습니다.해결책은 그를 제거하는 것이었습니다.Google closure컴파일러, 대신에 사용합니다.require.js의 옵티마이저 (r.jsjs 파일을 병합합니다.
언급URL : https://stackoverflow.com/questions/15371918/mismatched-anonymous-define-module
'programing' 카테고리의 다른 글
| C에서 STRCT를 사용할 때 명명 규칙 (0) | 2023.10.05 |
|---|---|
| "본래 스레드 세이프(thread-safe)"란 무엇을 의미합니까? (0) | 2023.10.05 |
| 가져오기: 상태가 정상이 아닐 경우 약속을 거부하고 오류를 잡습니까? (0) | 2023.10.05 |
| 폼을 편집할 때마다 확인하기 위해 $dirty in angularjs 사용 (0) | 2023.10.05 |
| LINQ의 Select 명령에 해당하는 파워셸? (0) | 2023.10.05 |