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ú
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' } } }
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' } }}
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.
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;