[javascript] 일치하지 않는 익명의 define () 모듈

웹 애플리케이션 을 처음 탐색 할 때 (일반적으로 캐시가 비활성화 된 브라우저에서) 이 오류가 발생 합니다.

오류 : 일치하지 않는 anonymous define () 모듈 : function (필수) {

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
    });
});

이 오류의 의미와 발생 원인을 정확히 아는 사람이 있습니까?

소스 파일 , github 이슈 페이지에서 그것에 대한 짧은 토론



답변

AlienWebguy 말했듯이, 워드 프로세서 당 require.js는 폭파 할 수 있는 경우

  • 자체 스크립트 태그에 익명의 define ( ” 문자열 ID없이 define ()을 호출하는 모듈 “)이 있습니다 (실제로는 전역 범위의 어느 곳이든 의미한다고 가정합니다)
  • 이름이 충돌하는 모듈이 있습니다
  • 로더 플러그인 또는 익명 모듈을 사용하지만 require.js의 옵티 마이저를 사용하여 번들로 묶지 마십시오.

require.js 모듈과 함께 browserify로 빌드 된 번들을 포함시키는 동안이 문제가 발생했습니다. 해결책은 다음 중 하나였습니다.

A. require.js가로드 되기 전에 스크립트 태그에 non-require.js 독립형 번들을 로드하거나

B. 스크립트 태그 대신 require.js를 사용하여로드


답변

스크립트 태그에 직접 포함 된 다른 라이브러리와 requirejs 파일을 포함했기 때문에이 오류가 발생했습니다. lodash와 같은 해당 라이브러리는 require의 define과 충돌하는 define 함수를 사용했습니다. requirejs 파일이 비동기 적으로로드되고 있으므로 요구 사항 정의가 다른 라이브러리가 정의 된 후에 정의되므로 충돌이 발생합니다.

오류를 제거하려면 requirejs를 사용하여 다른 모든 js 파일을 포함하십시오.


답변

reactjs를 시작하면서 문제에 부딪 쳤고 초보자는 문서 를 그리스어로 작성했을 수 있습니다.

내가 겪었던 문제는 대부분의 초보자 예제에서 “문자열 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!') } };
})

문자열 IDdefine 을 사용하면 다음과 같이 모듈을 사용하려고 할 때이 오류가 발생하지 않습니다.

require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
    moduleOne.helloWorld();
    moduleTwo.helloWorld2();
});


답변

문서 당 :

익명의 define () 호출로 스크립트를로드하기 위해 HTML로 스크립트 태그를 수동으로 코딩하면이 오류가 발생할 수 있습니다.

또한 이름이 지정된 몇 개의 모듈이있는 스크립트를로드하기 위해 HTML에서 스크립트 태그를 수동으로 코딩 한 다음 수동으로로드 한 스크립트의 이름이 지정된 모듈 중 하나와 이름이 같은 익명 모듈을로드하려고 시도하는 경우 코딩 된 스크립트 태그.

마지막으로 로더 플러그인 또는 익명 모듈 (문자열 ID없이 define ()을 호출하는 모듈)을 사용하지만 RequireJS 최적화 프로그램을 사용하여 파일을 결합하지 않으면이 오류가 발생할 수 있습니다. 최적화 프로그램은 익명 모듈의 이름을 올바르게 지정하여 최적화 된 파일에서 다른 모듈과 결합 할 수있는 방법을 알고 있습니다.

오류를 피하려면 다음을 수행하십시오.

  • RequireJS API를 통해 define ()을 호출하는 모든 스크립트를로드하십시오. define () 호출이있는 스크립트를로드하기 위해 HTML에서 스크립트 태그를 수동으로 코딩하지 마십시오.

  • HTML 스크립트 태그를 수동으로 코딩하는 경우 이름 지정된 모듈 만 포함하고 해당 파일의 모듈 중 하나와 이름이 같은 익명 모듈이로드되지 않아야합니다.

  • 로더 플러그인 또는 익명 모듈을 사용하는 데 문제가 있지만 RequireJS 최적화 프로그램이 파일 번들링에 사용되지 않는 경우 RequireJS 최적화 프로그램을 사용하십시오.


답변

일부 브라우저 확장 프로그램은 페이지에 코드를 추가 할 수 있습니다. 제 경우에는 requireJs와 엉망인 “Emmet in all textareas”플러그인이있었습니다. 브라우저에서 문서를 검사하여 문서에 추가 코드를 추가하지 않도록하십시오.


답변

기존 답변은 문제를 잘 설명하지만 requireJS를 사용하거나 이전에 스크립트 파일을 포함시키는 것이 레거시 코드로 인해 쉬운 옵션이 아닌 경우 약간 해킹 된 해결 방법은 스크립트 태그 전에 창 범위에서 require를 제거한 다음 사후에 복원하는 것입니다. 우리 프로젝트에서 이것은 서버 측 함수 호출 뒤에 싸여 있지만 효과적으로 브라우저는 다음을 볼 수 있습니다.

    <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>

가장 작지는 않지만 작동하는 것처럼 보이며 많은 굴절을 저장했습니다.


답변

또는이 방법을 사용할 수 있습니다.

  • 코드베이스에 require.js 추가
  • 그런 다음 해당 코드를 통해 스크립트를로드하십시오.

<script data-main="js/app.js" src="js/require.js"></script>

그것이하는 일은 require.js를로드 한 후에 스크립트를로드 합니다.