Requirejs 최적화 부트 스트랩 오류

debugcn 에 게시 Dev

니코

내 웹 사이트 프로젝트의 경우 다중 페이지를 사용하려면 js 설정이 필요합니다 ( https://github.com/requirejs/example-multipage-shim 참조 ).

최적화 후에는 main.js와 page1.js의 두 파일을 목표로합니다. Main.js에는 부트 스트랩 / 축소를로드하는 app.js가 포함되어 있습니다 (아래 r.js 빌드 파일 참조). 그러나 bootstrap-collapse 함수 page1.js를 호출하면 최적화 후에 작동하지 않습니다. app.js에서 동일한 호출을 수행하면 최적화 후에 작동합니다. page1.js의 축소 호출의 경우 부트 스트랩 축소 기능에서 'Undefined is not a function'오류가 발생합니다. 최적화가 없으면 모든 것이 잘 작동합니다.

내가 뭘 잘못하고 있니?

이것은 내 requirejs 구성입니다.

requirejs.config({
    paths: {
        'jQuery'   : ["http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery","vendor/jquery/jquery-1.9.1"],
        'bootstrap': 'vendor/bootstrap'
    },
    shim: {
        'jQuery': {exports: "$"},
        'bootstrap/slider': { deps: ['jQuery'], exports: '$.fn.slider' },
        'bootstrap/affix': { deps: ['jQuery'], exports: '$.fn.affix' },
        'bootstrap/alert': { deps: ['jQuery'], exports: '$.fn.alert' },
        'bootstrap/button': { deps: ['jQuery'], exports: '$.fn.button' },
        'bootstrap/carousel': { deps: ['jQuery'], exports: '$.fn.carousel' },
        'bootstrap/collapse': { deps: ['jQuery'], exports: '$.fn.collapse' },
        'bootstrap/dropdown': { deps: ['jQuery'], exports: '$.fn.dropdown' },
        'bootstrap/modal': { deps: ['jQuery'], exports: '$.fn.modal' },
        'bootstrap/scrollspy': { deps: ['jQuery'], exports: '$.fn.scrollspy'        },
        'bootstrap/tab': { deps: ['jQuery'], exports: '$.fn.tab' },
        'bootstrap/tooltip': { deps: ['jQuery'], exports: '$.fn.tooltip' },
        'bootstrap/popover': { deps: ['jQuery'], exports: '$.fn.popover' },
        'bootstrap/transition': { deps: ['jQuery'], exports: '$.support.transition' },
        'bootstrap/typeahead': { deps: ['jQuery'], exports: '$.fn.typeahead'  }
    }
});

이것은 내 빌드 파일입니다.

{
    appDir: '../assets',
    baseUrl: './js',
    mainConfigFile: '../assets/js/main.js',
    dir: '../dist',
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'standard',
    removeCombined: true,
    paths: {
        jQuery: "empty:"
    },
    modules:
    [
        {
            name: 'main',
            include: ['app']
        },
        {
            name: 'pages/page1',
            exclude: ['app']
        }
    ]
}

app.js :

require(['app/mobilemenu','bootstrap/collapse']);

page.js :

require(['jQuery','bootstrap/collapse'],function($)
{
   $("div").collapse(); 
});

문서 헤드 섹션 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="/js/vendor/requirejs/require.js" data-main="/js/main.js"></script>

본문 태그 닫기 전 :

<script>
   require(["main"],function(){
       require(["app","pages/page1"]);
   });
</script>

Louis

주요 문제

<script>태그로 jQuery를 로드하고 RequireJS로도로드합니다. 둘 중 하나만 수행해야합니다. <script>태그를 제거 하고 RequireJS가 jQuery를로드하도록하면보고 한 문제가 해결됩니다. 때때로 작동하지 않는 이유는 현재 설정으로는 부트 스트랩이 올바른 jQuery객체 에 스스로 설치 될 것인지 보장 할 수 없기 때문입니다 . 로드하는 데 자체적으로 설치되고 <script>RequireJS가 jQuery를 다시로드 할 때 덮어 쓸 수 있습니다.

<script>jQuery를로드 하기 위해 태그 를 유지할 이유가있는 경우 새 jQuery를로드하는 대신 해당 jQuery 를 사용 하도록 RequireJS를 가져와야합니다 . 방법에 대한 방법 은 이 답변 을 참조하십시오 .

2 차 문제

구성에 즉시 눈에 띄는 두 가지 문제가 있습니다.

1.8.0 이상부터 jQuery에는 shim이 필요하지 않습니다.
당신은 해야한다 으로 jQuery를 참조 jquery하면 그 RequireJS 모듈 이름으로 그것을 참조 할 때. 모듈 이름 jquery(모두 소문자)이 jQuery 소스에 하드 코딩되어 있기 때문 입니다. 구성의 변화에 따라서 jQuery에 jquery, 모두 같은 define통화를하고 require그것을 사용할 수 있습니다 전화.

위의 문제는 RequireJS를 정의되지 않은 동작 영역으로 보냅니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-31

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사