¿Cómo empaquetar múltiples bibliotecas javascript con browserify?

Estoy tratando de usar Browerifiy en el navegador, si uso la opción independiente, expone un módulo. No quiero hacer esto El sitio web y la documentación parecen interrumpir todo lo que busco después de comstackr el código. Nadie ha dicho cómo usar realmente el código en la propiedad del navegador.

Tengo una tarea ronca como tal:

browserify: { standalone: { src: [ '/shared-components/**/*.js' ], dest: '/app/js/browserifed-shared-code.js', /* Commented out, zero documentation on this. Can only expose one module it seems. options: { browserifyOptions: { standalone: 'Utility' //Unable to say '**/*' error :-/ } } */ }, 

Esto parece funcionar, hace un archivo como este:

 (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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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){ 'use strict'; var UrlController = function(){}; UrlController.test = function () { return 'test'; }; module.exports = UrlController; },{}],2:[function(require,module,exports){ 'use strict'; var Utility = function(){}; Utility.isASCII = function (str) { return /^[\x00-\xFF]*$/.test(str); }; Utility.isAlphaNumeric = function(str) { var code, i, len; for (i = 0, len = str.length; i  47 && code  64 && code  96 && code < 123)) { // lower alpha (az) return false; } } return true; }; module.exports = Utility; },{}]},{},[1,2]); 

Lo incluyo automáticamente usando un inyector que funciona de manera similar a:

  

Ahora espero que pueda llamar

 require('Utility'); 

Pero me sale

 Uncaught ReferenceError: require is not defined(…) 

No tengo ni idea ni manera de cargar estos módulos en el navegador. : ‘- /

Tu tienes dos opciones aquí. Tampoco tú

SOLUCIÓN 1

Cree un módulo de navegador independiente para cada biblioteca a la que desee acceder en su navegador. Esto ha sido respondido en tu otro post. Básicamente haces múltiples paquetes de browser.

.

 browserify library1.js --standalone Library1 -o library1-bundle.js browserify library2.js --standalone Library2 -o library2-bundle.js browserify library3.js --standalone Library3 -o library3-bundle.js    

Así, en tu herramienta de construcción tendrías

 browserify: { library1 : { src: [ '<%= yeoman.server %>/shared-components/library1.js' ], dest: '<%= yeoman.client %>/app/js/library1-bundled.js', bundleOptions : { standalone : 'Library1' } }, library2 : { src: [ '<%= yeoman.server %>/shared-components/library2.js' ], dest: '<%= yeoman.client %>/app/js/library2-bundled.js', bundleOptions : { standalone : 'Library2' } }, library3 : { src: [ '<%= yeoman.server %>/shared-components/library3.js' ], dest: '<%= yeoman.client %>/app/js/library3-bundled.js', bundleOptions : { standalone : 'Library3' } } } 

SOLUCIÓN 2

O bien, cree un punto de entrada principal para todos sus módulos.

 // ---- main.js ----- module.exports.Library1 = require('./lib1'); module.exports.Library2 = require('./lib2'); module.exports.Library3 = require('./lib3'); 

Entonces, usas browserify

 browserify main.js --standalone Library -o bundle.js 

Entonces en tu navegador

  

En tu tarea de gruñido:

 browserify: { standalone: { src: [ '<%= yeoman.server %>/shared-components/main.js' ], dest: '<%= yeoman.client %>/app/js/main-bundled.js', bundleOptions : { standalone : 'Library' } }} 

Nota sobre los cargadores de módulos y Browserify

Luego, para ampliar la respuesta que hice en su publicación anterior, browserify expone sus módulos agrupados de manera diferente en función del administrador de módulos presente en su entorno.

  • Si está en un nodo, es común (sincronización) para que pueda usar require ('');
  • Si está utilizando AMD (asíncrono), puede usar esa syntax de AMD.
  • Si estás en el navegador, debes usar cualquiera de las dos ventanas. o global.

Definición de tarea dinámica Grunt

Para automatizar esto un poco, también puede pasar una configuración:

 bundledLibraries : [ Library1 : { src : './../src/lib1.js', dest : './../src/lib1-bundled.js' }, Library2 ... ] 

Entonces iterar para agregarlos a la configuración grunt (

Consulte este artículo para crearlos dinámicamente http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html

Conseguí esto trabajando a mi manera sin ofuscar demasiado el proyecto con las dependencias.

En gruñido tengo

 browserify: { standalone: { src: [ '<%= yeoman.server %>/shared-components/exposed-modules.js' ], dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js', options: { browserifyOptions: { standalone: 'Shared' } } }, } //In-completed example. watch: { scripts: { files: ['<%= yeoman.server %>/shared-components/**/*.js'], tasks: ['browserify'], options: { spawn: false } }, 

Luego expuse los módulos que quiero usar:

 'use strict'; //This is the main entry point for all shared libraries. var Utility = require('./utility'); var UrlController = require('./url-controller'); var Shared = function(){}; //Added new client modules to be exposed here. Shared.Utility = Utility; Shared.UrlController = UrlController; module.exports = Shared; 

En el navegador ahora puedo llamar

 shared.Utility.isAscii('test'); //Working. 

Y en cualquier lugar que quiera reutilizar, simplemente asigno en el scope, así que

 //Some scope. var Utility = shared.Utility;