javascript - online - Requerido no se define error con browserify
browserify vs webpack (4)
La función "Requerir" solo está disponible en el contexto del script "bundle.js". Browserify tomará todos los archivos de script necesarios y los colocará en el archivo "bundle.js", por lo que solo debe incluir "bundle.js" en el archivo HTML, no el archivo "script.js".
Soy nuevo en browserify y trato de cargar módulos npm en el navegador, pero aparece el siguiente error:
Error de referencia no detectado: no está definido
Estoy siguiendo el tutorial de http://browserify.org/ . Archivo javascript creado con el siguiente contenido:
var unique = require (''uniq'');
entonces corre
npm instala uniq
y
browserify main.js -o bundle.js
el archivo bundle.js se genera y lo incluí en mi html pero aún obtengo el error anterior. ¿Alguna idea de qué estoy haciendo mal?
Este es el contenido del archivo HTML final:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="bundle.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
Este es el contenido de bundle.js: http://pastebin.com/1ECkBceB
y esto es script.js:
var unique = require (''uniq'');
Parece que para ejecutar una secuencia de comandos como la que tiene que usar independiente en el paquete.
browserify main.js --standalone Bundle > bundle.js
Después de eso deberías tener window.Bundle en bundle.js .
Entonces, en ese punto, deberías poder acceder desde script.js .
si estas usando gruñido
Si está utilizando grunt install grunt-browserify .
npm install grunt-browserify --save-dev
Y luego en grunt.js Gruntfile:
// Add the task
grunt.loadNpmTasks(''grunt-browserify'');
// Add the configuration:
browserify: {
dist: {
options: {
// uncomment if you use babel
// transform: [
// ["babelify", { "presets": ["env"] }]
// ],
browserifyOptions: {
standalone: ''Bundle''
}
},
files: {
"bundle.js": ["main.js"]
}
}
},
si estas usando gulp
// on your build task
var bundled = browserify(''main.js'', { standalone: ''Bundle'' })
.bundle()
.pipe(source(''bundle.js''))
.pipe(gulp.dest(outDir));
Consulte here para el archivo Chart.js gulp.
si estas usando babel
Si está utilizando babel y es6 probablemente esté exportando su clase Bundle .
// you should have something like that
class Bundle {
...
}
export default Bundle;
Entonces, debido a que Babel ahora usa Bundle , debe usar Bundle.default y así:
// in script.js
var bundle = new Bundle.default();
Para evitar esta sintaxis, puede anular Bundle con Bundle.default .
Al final de bundle.js inserte:
window.Bundle = window.Bundle.default;
Así que ahora tendrás:
// in script.js
var bundle = new Bundle.default();
Fuentes
Personalmente prefiero mantener el código de mi biblioteca y el código de la aplicación por separado. Así que también creo algo como un bundle.js y un script.js .
Hay una solución simple, que hace que esto funcione. Esto está en algún lugar en mi archivo de navegación:
window.require = require;
esto expondrá require en el espacio de nombres "global". A continuación, puede script.js todo lo que desee de su script.js .
Sin embargo, renuncia a UNA ventaja: deberá incluir todas las bibliotecas requeridas en el archivo de su navegador. ¡No te puedes dar el lujo de encontrar todas tus dependencias, entonces!
Espero que la gente grite "truco sucio" o "así no es como debe ser". Si quizas. Pero quiero esos archivos separados. Y siempre que no incluya nada que se llame "requerir", estaré bien, muchas gracias.
A veces, un global puede hacer toda la diferencia.
Respuesta corta : eliminar la importación de script.js
Respuesta más larga : está recibiendo el error porque el método require no está definido en el navegador. No debes incluir script.js .
La idea detrás de Browserify es que puede dividir sus fuentes utilizando los módulos CommonJS y agruparlos en un archivo para usar en el navegador. Browserify atravesará todas sus fuentes y concatenará todos require archivos require en el paquete.