5

Używam requirejs i konfiguruję artefakty produktu, łącząc w ten sposób moje biblioteki i konfigurując zależności między nimi, aby uzyskać odpowiednią kolejność ładowania za pomocą zadania chowania dla requirejs. Nie mam problemu z wykorzystaniem wtrysku modułu uruchomieniowego, podczas gdy na moim serwerze livereload, który ma dostęp do bibliotek nieskonfigurowanych. Dla jasności wyłączyłem wszystkie minifikacje/ugrzędy i włączyłem js-upiększyć.Shim z grunt-contrib-requirejs nie pakuje biblioteki

requirejs: { 
     dist: { 
      // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js 
      options: { 
       // `name` and `out` is set by grunt-usemin 
       // name: 'App', 
       baseUrl: yeomanConfig.app + '/scripts', 
       mainConfigFile: yeomanConfig.app + '/scripts/config.js', 
       out: yeomanConfig.dist + '/scripts/main.js', 
       optimize: 'none', 
       // TODO: Figure out how to make sourcemaps work with grunt-usemin 
       // https://github.com/yeoman/grunt-usemin/issues/30 
       //generateSourceMaps: true, 
       // required to support SourceMaps 
       // http://requirejs.org/docs/errors.html#sourcemapcomments 
       beautify: false, 
       removeCombined: false, 
       generateSourceMaps: false, 
       preserveLicenseComments: false, 
       useStrict: true, 
       mangle: false, 
       compress: false, 
       // wrap: true, 
       // https://github.com/mishoo/UglifyJS2 
      } 
     } 
    }, 

Używam Kendo, Angular i Angular-Keno-UI. Rozumiem, że Kendo ma moduł AMD, ale nie wygląda jak Angular-Keno-UI. Spodziewałem się, że utworzę shim i zostanie on zawinięty w odpowiednią funkcję definiującą requirejs, jednak nie uważam, aby tak się działo.

require.config({ 
     cjsTranslate: true, 
     paths: { 
      jquery: 'vendor/jquery/jquery', 
      'angular-kendo-ui': 'vendor/angular-kendo-ui/build/angular-kendo', 
      kendo: 'vendor/kendoui.complete.2013.2.918.trial/js/kendo.all.min', 
      angular: 'vendor/angular/angular', 
      requirejs: 'vendor/requirejs/require', 
      'angular-animate': 'vendor/angular-animate/angular-animate', 
      'angular-ui-router': 'vendor/angular-ui-router/release/angular-ui-router.min', 
      'angular-resource': 'vendor/angular-resource/angular-resource' 
     }, 
     shim: { 
      jquery: { 
       exports: '$' 
      }, 
      angular: { 
       deps: [ 
        'jquery' 
       ], 
       exports: 'angular' 
      }, 
      'angular-resource': { 
       deps: [ 
        'angular' 
       ] 
      }, 
      'angular-kendo-ui': { 
       deps: [ 
        'angular', 
        'kendo' 
       ] 
      }, 
      'angular-ui-router': { 
       deps: [ 
        'angular' 
       ] 
      } 
     } 
    }); 

Aby rozwiązać ten brak przygotowania modułu I owinąć go sobie jako takie:

define('angular-kendo-ui', [ 
     'angular', 
     'kendo' 
     ], function (
     angular, 
     kendo 
    ) { 
     < original angular-kendo-ui source > 
    }); 

Czy ja źle zrozumiane stosowanie podkładek? Mogłoby się wydawać, że mam i faktycznie nie otacza zdefiniowanej ścieżki, a jedynie wskazuje na nią, jeśli moduł jest wymagany (co jest w porządku w ładowaniu modułu dynamicznego).

Podczas mojej pierwszej weryfikacji tych technologii zauważyłem GDZIEŚMY istniał sposób, aby requirejs (lub jeden z mutatorów aktywów w moim strumieniu) automatycznie zawijał dla mnie moduły. Każdy ma dla mnie podpowiedź, zakładam, że to requirejs, który zawija moduły zdefiniowane w config jako ścieżki, ale może się myliłem. Poniżej znajduje się wydruk zadania bycia ran:

Done, without errors. 

    Elapsed time 
    build       887ms 
    useminPrepare:html    22ms 
    concurrent:dist    8s 
    autoprefixer:dist    174ms 
    requirejs:dist     19s 
    jsbeautifier:dist    2s 
    concat:public/styles/main.css 46ms 
    concat:public/scripts/main.js 56ms 
    cssmin:public/styles/main.css 81ms 
    copy:dist      26ms 
    usemin:html     5s 
    usemin:css      24s 

Odpowiedz

2

to tylko dzikie przypuszczenie (w zależności od wersji optymalizatora), ale - nie tak cool - config-dokumentacja wskazuje tutaj:

Począwszy od 2.1 .11, zależności shimmed mogą być zawijane w wrapper define() , aby pomóc, gdy zależności pośrednie są zależne od AMD ich własnych. Przykładem kanonicznym jest projekt wykorzystujący szkielet, który zależy od jQuery i podkreślenia . Uzależnione od siebie zależności, które mają być dostępne dla szkieletu, muszą być natychmiast niedostępne w kompilacji, ponieważ wersje kompatybilne z AMD o numerze nie wykonają funkcji define(), dopóki zależności nie będą gotowe. Przez owijanie tych zależnych zależności można tego uniknąć, ale może wprowadzić inne błędy, jeśli te shimmed zależności używają globalnego zakresu w dziwny sposób, więc nie jest to domyślne zachowanie do zawijania.

więc może używać:

wrapShim: true 

https://github.com/jrburke/r.js/blob/master/build/example.build.js

Ponieważ używając "mainConfigFile" config podkładka powinna być już w optymalizator, jest często inny punkt awarii.

+0

po ponad 3 godzinach debugowania, znalazłem tę odpowiedź- dziękuję! – LessQuesar

Powiązane problemy