web-dev-qa-db-fra.com

require n'est pas défini erreur avec browserify

Je suis nouveau dans la navigation et j'essaie de charger les modules npm dans le navigateur, mais j'obtiens l'erreur suivante:

UnCaught ReferenceError: require n'est pas défini

Je suis le tutoriel de http://browserify.org/ . Fichier javascript créé avec le contenu suivant:

var unique = require ('uniq');

puis exécutez

npm install uniq

et

browserify main.js -o bundle.js

le fichier bundle.js est généré et je l'ai inclus dans mon html mais j'obtiens toujours l'erreur ci-dessus. Des idées que fais-je mal?

Voici le contenu du fichier HTML final:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="bundle.js"></script>
    <script src="script.js"></script>
</head>
<body>

</body>
</html>

Voici le contenu de bundle.js: http://Pastebin.com/1ECkBceB

et voici script.js:

var unique = require ('uniq');

javascriptnode.jsbrowserify
29
King Julien

La fonction "require" n'est disponible que dans le contexte du script "bundle.js". Browserify prendra tous les fichiers de script nécessaires et les placera dans le fichier "bundle.js", vous ne devez donc inclure que "bundle.js" dans le fichier HTML, pas le fichier "script.js".

37
kevinvile

Personnellement, je préfère garder mon code de bibliothèque et mon code d'application séparés. Donc je crée aussi quelque chose comme un bundle.js et un script.js.

il existe une solution de contournement simple, qui rend ce travail. C'est quelque part dans mon fichier browserify:

window.require = require;

cela exposera require dans l'espace de noms "global". Vous pouvez alors demander tout ce que vous voulez de votre script.js.

Cependant, vous renoncez à UN avantage: vous devrez inclure toutes les bibliothèques requises dans votre fichier browserify. Vous n'avez pas le luxe de trouver toutes vos dépendances, alors!

Je m'attends à ce que les gens crient "sale hack" ou "ce n'est pas comme ça que ça doit être". Oui peut-être. Mais je veux que ces fichiers soient séparés. Et tant que je n'inclus rien d'autre qui s'appelle "exiger", ça ira, merci beaucoup.

Parfois, un seul global peut faire toute la différence.

14
amenthes

Réponse courte: supprimez l'importation script.js

Réponse plus longue: vous obtenez l'erreur car la méthode require n'est pas définie dans le navigateur. Vous ne devez pas inclure script.js.

L'idée derrière Browserify est que vous pouvez diviser vos sources à l'aide de modules CommonJS et les regrouper en un seul fichier à utiliser dans le navigateur. Browserify traversera toutes vos sources et concaténera tous les fichiers required dans le bundle.

8
thomaux

Il semble que pour exécuter un script comme celui-ci, vous devez utiliser de manière autonome sur le bundle.

browserify main.js --standalone Bundle > bundle.js

Après cela, vous devriez avoir window.Bundle dans bundle.js.
À ce stade, vous devriez pouvoir accéder à partir de script.js.

si vous utilisez grognement

Si vous utilisez grunt install grunt-browserify.

npm install grunt-browserify --save-dev

Et puis sur 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 vous utilisez gulp

 // on your build task
 var bundled = browserify('main.js', { standalone: 'Bundle' })
               .bundle()
               .pipe(source('bundle.js'))
               .pipe(gulp.dest(outDir));

Voir ici pour le fichier gulp Chart.js.

si vous utilisez babel

Si vous utilisez babel et es6 vous exportez probablement votre classe Bundle.

// you should have something like that 

class Bundle {
    ...

}

export default Bundle;

Donc, à cause de babel pour utiliser Bundle, vous devez utiliser Bundle.default et donc:

// in script.js
var bundle = new Bundle.default();

Pour éviter cette syntaxe, vous pouvez remplacer Bundle par Bundle.default.

À la fin de bundle.js, insérez:

window.Bundle = window.Bundle.default;

Alors maintenant, vous aurez:

// in script.js
var bundle = new Bundle.default();

Sources

Builds Browserone autonomes

8
borracciaBlu