difficoltà ottenere browserify-shim lavorare con grugnito-browserify (> 2.0.2) come trasformare

Question

Nella versione 2.0.2 di grunt-browserify, browserify-shim è stato rimosso dal modulo stesso e convertiti per essere usato come un transform, piuttosto che un semplice option su un'attività grunt-browserify.

La vecchia versione di utilizzare lo spessore con grunt-browserify apparirebbe come tale:

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

Questo ha funzionato grande, e ha generato un involucro intorno al modulo libs.js in quanto tale:

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"]); 

Tuttavia , in base alla documentazione (incredibilmente scarsa e frustrante), la nuova versione dello shim all'interno di grunt-browserify viene utilizzata come un transform, come ad esempio:

'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'] 
    } 
} 

e, dal momento che la configurazione browserify-shim s' è ora interamente basato sulla configurazione package.json, il mio package.json sembra come tale:

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

Tuttavia, questo genera un wrapper che assomiglia :

(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]); 

Come si può vedere, manca qualcosa in questo nuovo involucro; non sembra essere equivalente al valore di esportazione i10PRm assegnato nel vecchio wrapper. Presumibilmente, questo significa che sto usando le esportazioni in modo non corretto in qualche modo, anche se sto seguendo i documenti browserify-shim e tutto sembra abbastanza semplice.

Mi piacerebbe qualsiasi assistenza o chiarezza riguardo le versioni più recenti di grunt-browserify (>= 2.0.2) e browserify-shim e come usarli insieme correttamente.

Answer 1

Solo un aggiornamento per la posterità: ho finito per ammarare grunt-browserify e semplicemente usando browserify-shim con browserify dalla riga di comando. Funziona all'istante senza alcun problema.

sono giunto alla convinzione che la combinazione dei tre librerie (browserify, grunt-browserify, e browserify-shim) sono tutti semplicemente essere aggiornato e modificato troppo rapidamente per poter contare su di loro a lavorare insieme come sono aggiornati. L'interruzione del componente grunt rende i due rimanenti molto più facili da gestire.

Il creatore di browserify-shim seems to agree:

... nella mia esperienza ogni volta che la gente avvolgono browserify e browserify-spessore (entrambi i quali sono perfettamente configurabile in package.json) all'interno di un corridore compito, essi stanno rendendo la loro vita un po 'più difficile.

Answer 2

Ho lottato con questo set up troppo, ma sono riuscito a farlo funzionare, eliminando completamente le impostazioni di shim dal mio Gruntfile.js e lasciando browserify gestirli in package.json.Qui sto usando lo spessore con jquery, è anche possibile vedere le versioni che ho in esecuzione di seguito:

// 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" 
} 

La parte rilevante della mia Gruntfile.js ora assomiglia a questo:

// portion of Gruntfile.js 

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

grunt:browserify ora lavora come atteso, chiamando browserify ma permettendogli di gestire browserify-shim da solo.

Answer 3

Donot run browserify via grunt watch, questo non riflette le modifiche apportate da voi in mezzo.

Così, invece ogni volta che si cambia package.json file, eseguire browserify compito grunt broswerify