javascript - modules - require es5
Browserify requiere todos los archivos en el directorio (2)
Soy nuevo en Browserify (y en los sistemas de compilación de Javascript en general) y he llegado a un punto en el que estoy completamente confundido.
Tengo la configuración de Gulp para hacer mis compilaciones, que siempre ha funcionado bien, y últimamente he estado usando Browserify para agrupar, principalmente para poder separar mi código en archivos separados y solicitarlos require()
donde deben estar.
Mi problema es que tengo una carpeta con un montón de pequeños módulos que necesito requerir dentro de otro módulo, y estoy tratando de evitar la codificación de los nombres de todos ellos. ¿Hay una manera de hacer un requerimiento de todos los archivos?
He intentado usar Bulkify y Folderify pero no puedo hacer que funcionen. Por ejemplo, con Bulkify, el paquete instalado se llama bulkify y se encuentra en la carpeta node_modules, pero luego le dicen que requiera bulk-require , que está en una carpeta sub node_modules del paquete bulkify. Cuando lo intento, Browserify se ahoga con un error de tipo Cannot find module ''bulk-require''...
.
En este punto estoy confundido porque no tengo idea de por qué las instrucciones de instalación de ambos no funcionan (ni si me ayudarán). ¿Se supone que debo usarlos en mi archivo Gulp? ¿O puedo usarlos en uno de mis módulos y se llamará durante el Browserify?
Aquí hay un fragmento de mi tarea de compilación para esto si esto ayuda:
// Report Builder
gulp.task(''script-builder'', function() {
// Unminified
// **********************************************************
browserify({entries: ''./resources/assets/js/report/builder.js''})
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.bundle()
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(source(''builder.js''))
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(buffer())
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(gulp.dest(''./public/js/debug''));
// Minified
// **********************************************************
browserify({entries: ''./resources/assets/js/report/builder.js''})
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.bundle()
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(source(''builder.js''))
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(buffer())
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(ext_replace(''.min.js''))
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(uglify())
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(gulp.dest(''./public/js/dist''));
});
No tengo idea de lo que estoy haciendo aquí. ¿Voy a tener que codificar las rutas en mis llamadas a require()
o hay una mejor manera?
EDITAR
Puedo ver claramente el bulk-require
en el módulo de nodo bulkify
:
Pero, cuando intento exigir un gran bulk-require
, se ahoga:
module.exports = function(type, driver, node) {
var propertiesContainer = ''#property-container'';
var bulk = require(''bulk-require'');
var mods = bulk(__dirname, [''properties/**/*.js'']);
}
Error: no se puede encontrar el módulo ''bulk-require'' desde ''/ path / to / my / project / resources / asset / js / report''
Editar 2
Pude hacer este trabajo utilizando el paquete require-globify
( https://github.com/capaj/require-globify ). En mi javascript, utilicé:
var properties = require(''./properties/*.js'', {mode: ''hash'', resolve: [''path-reduce'', ''strip-ext'']});
Eso devolvió un objeto con claves como el nombre de archivo sin extensión o el prefijo de ruta.
En mi gulpfile.js, hice esto:
browserify({
entries: ''./resources/assets/js/report/builder.js'',
transform: [''require-globify'']
})
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.bundle()
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(source(''builder.js''))
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(buffer())
.on(''error'', function (err) { console.log(err); this.emit(''end''); })
.pipe(gulp.dest(''./public/js/debug''));
Esa es una tarea bastante fácil de lograr. Usando fs puede requerir dinámicamente todas las dependencias a la vez simplemente accediendo a su carpeta node_modules.
var normalizedPath = require("path").join(__dirname, "node_modules/bulkify");
require("fs").readdirSync(normalizedPath).forEach(function(file) {
require("./node_modules/bulkify" + file);
});
Más respuestas sobre esta pregunta se pueden encontrar here
EDITAR Disculpas por la respuesta genérica, entendí mal la pregunta sobre la necesidad dinámica de archivos en Browserify.
https://github.com/capaj/require-globify parece un buen enfoque para su problema.
Tómese un momento para ver también esta respuesta. Compilación de módulos requeridos dinámicamente con Browserify
No lo he usado, pero creo que bulkify
hará lo que quieras.
¿Se supone que debo usarlos en mi archivo Gulp? ¿O puedo usarlos en uno de mis módulos y se llamará durante el Browserify?
Si y si.
Creo que la esencia de esto es algo como esto:
gulpfile.js
var bulkify = require(''bulkify'');
browserify(...)
.transform(bulkify)
// ...
another-module.js
(módulo empaquetado)
var bulk = require(''bulk-require'');
var a_bunch_of_small_modules = bulk(__dirname, [''somdir/**/*.js'']);
a_bunch_of_small_modules.somedir.whatever();