trudności w browserify-podkładka działa w grunt-browserify (> 2.0.2) w transformacji

Question

W wersji 2.0.2 grunt-browserify, browserify-shim usunięto z samego modułu i przekształcono do stosowania jako transform raczej niż proste option w zadaniu grunt-browserify.

stary wersja stosując podkładkę z grunt-browserify będzie wyglądać w następujący sposób:

'libs-dev': { 
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')], 
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'), 
    options: { 
     shim: { 
      angular: { 
       path: path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js'), 
       exports: 'angular' 
      } 
     } 
    } 
} 

To było wspaniałe, a generowane otoki wokół modułu libs.js jako takie:

require=(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({"angular":[function(require,module,exports){ 
    module.exports=require('i10PRm'); 
},{}],"i10PRm":[function(require,module,exports){ 
    (function(global){(function browserifyShim(module, exports, define, browserify_shim__define__module__export__) { 
     browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular); 
    }).call(global, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; }); 
})(window) 
},{}]},{},["i10PRm"]); 

jednak , na podstawie (niewiarygodnie rzadkiej i frustrującej) dokumentacji, nowa wersja podkładki w zakresie grunt-browserify jest używana jako transform, jako takich:

'libs-dev': { 
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')], 
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'), 
    options: { 
     transform: ['browserify-shim'] 
    } 
} 

, a od konfiguracji browserify-shim „s jest teraz całkowicie w oparciu o package.json konfiguracji, mój package.json wygląda w następujący sposób:

"browser": { 
    "angular": "./bower_components/angular/angular.js" 
}, 
"browserify-shim": { 
    "angular": "angular" 
} 

Jednak ta generuje owijkę, która wygląda jak :

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 
    (function (global){ 
     __browserify_shim_require__=require;(function browserifyShim(module, exports, require, define, browserify_shim__define__module__export__) { 
      browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular); 
    }).call(global, undefined, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; }); 
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 
},{}]},{},[1]); 

Jak widać, czegoś brakuje w tym nowym opakowaniu; nie wydaje się być odpowiednikiem wartości eksportu i10PRm przypisanej w starym opakowaniu. Prawdopodobnie oznacza to, że nieprawidłowo używam eksportu, mimo że postępuję zgodnie z dokumentami browserify-shim i wszystko wydaje się dość proste.

Życzę wszelkiej pomocy lub jasności odnośnie najnowszych wersji grunt-browserify) i oraz sposobu prawidłowego ich użycia.

Answer 1

Po prostu aktualizacja dla dobra potomności: skończyłem zrywając grunt-browserify i po prostu używając browserify-shim z browserify z wiersza polecenia. Działa natychmiast, bez żadnych problemów.

Doszedłem do przekonania, że ​​połączenie trzech bibliotekami (browserify, grunt-browserify i browserify-shim) są po prostu są aktualizowane i zmieniane zbyt szybko, by móc liczyć na ich współpracę, jak są one aktualizowane. Porzucenie komponentu grunt sprawia, że ​​pozostałe dwa są łatwiejsze w zarządzaniu.

Twórca browserify-podkładki seems to agree:

... z mojego doświadczenia, kiedy ludzie owinąć browserify i browserify-podkładkę (z których oba są całkowicie konfigurowalny w package.json) wewnątrz biegacza zadań, oni czynią życie nieco trudniejszym.

Answer 2

Walczyłem z tym założyć też, ale udało mi się dostać pracy przez całkowite usunięcie podkładki ustawienia z mojego Gruntfile.js i pozwalając browserify obsługiwać je w package.json.Tutaj używam podkładkę z jquery, można również zobaczyć wersje mam uruchomiony poniżej:

// portion of package.json 

"browser": { 
    "jquery": "./js/lib/jquery-1.11.0.min.js" 
}, 
"browserify-shim": { 
    "jquery": "$" 
}, 
"browserify": { 
    "transform": [ 
     "browserify-shim" 
    ] 
}, 
"devDependencies": { 
    "grunt": "~0.4.1", 
    "grunt-cli": "~0.1.10", 
    "browserify": "~3.44.2", 
    "browserify-shim": "~3.4.1", 
    "grunt-browserify": "~2.0.8" 
} 

Odpowiednia część mojego Gruntfile.js teraz wygląda tak:

// portion of Gruntfile.js 

browserify: { 
    bundleOptions: { 
     debug: true 
    }, 
    src: 'js/src/main.js', 
    dest: 'js/output.js' 
}, 

grunt:browserify teraz pracuje jako oczekiwano, dzwoniąc pod numer browserify, ale umożliwiając samodzielne obsługiwanie browserify-shim.

Answer 3

Uruchom przeglądarkę przez grunt watch, to nie będzie odzwierciedlać zmian wykonanych przez Ciebie w środku.

Więc zamiast każdej zmianie package.json plik, uruchom browserify zadanie grunt broswerify