De la difficulté à obtenir browserify-cale de travail avec grunt-browserify (> 2.0.2) transformation

Question

Dans la version 2.0.2 de grunt-browserify, browserify-shim a été supprimé depuis le module en lui-même et converti pour être utilisé comme un transform, plutôt qu'un simple option sur un grunt-browserify de la tâche.

L' vieux la version de l'utilisation de la cale avec grunt-browserify comme tels:

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

Cela a très bien fonctionné, et a généré un wrapper autour de la libs.js module en tant que tel:

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

Cependant, sur la base (incroyablement rares et frustrant) de la documentation, de l' nouveau la version de la cale à l'intérieur de grunt-browserify est utilisé comme un transform, en tant que tel:

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

et, depuis browserify-shim's configuration est maintenant entièrement basé sur package.json configuration, mon package.json regarde comme tels:

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

Toutefois, cela génère un wrapper qui ressemble à ceci:

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

Comme vous pouvez le voir, il manque quelque chose à partir de ce nouveau wrapper;il ne semble pas être un équivalent de la i10PRm la valeur des exportations affectées dans l'ancien emballage.Sans doute, cela signifie que je suis en utilisant les exportations de manière incorrecte en quelque sorte, je suis cependant à la suite de la browserify-shim docs et tout cela semble assez simple.

Aimerait toute assistance ou de clarté en ce qui concerne les versions les plus récentes de grunt-browserify (>= 2.0.2) et browserify-shim et comment les utiliser correctement ensemble.

Answer 1

Juste une mise à jour dans un souci de postérité:J'ai fini par amerrissage forcé grunt-browserify et juste à l'aide de browserify-shim avec browserify à partir de la ligne de commande.Il fonctionne instantanément avec pas de problèmes du tout.

Je suis arrivé à la conviction que la combinaison des trois libs (browserify, grunt-browserify, et browserify-shim) sont tout simplement mis à jour et modifié trop rapidement pour être en mesure de compter sur eux de travailler ensemble comme ils sont mis à jour.L'amerrissage forcé la grunt composant rend les deux autres beaucoup plus facile à gérer.

Le créateur de browserify-shim semble d'accord:

...dans mon expérience, chaque fois que les gens envelopper browserify et browserify-cale (qui sont tous deux parfaitement configurable dans le paquet.json) à l'intérieur d'une task runner, ils font de leur vie un peu plus difficile.

Answer 2

J'ai eu du mal avec ce jeu de trop, mais j'ai réussi à le faire fonctionner en supprimant complètement la cale paramètres de mon Gruntfile.js et de laisser browserify de les manipuler package.json.Ici, je suis en utilisant la cale avec jquery, vous pouvez également voir les versions que j'ai de course ci-dessous:

// 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 partie pertinente de mon Gruntfile.js ressemble maintenant à ceci:

// portion of Gruntfile.js

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

grunt:browserify fonctionne maintenant comme prévu, en appelant browserify mais lui permettant de gérer browserify-shim par lui-même.

Answer 3

Ne pas exécuter browserify via grunt watch, ce ne sera pas de refléter les changements que vous avez fait dans le milieu.

Donc, au lieu de cela chaque fois que vous modifiez package.json fichier, exécutez browserify tâche par grunt broswerify