Ich bin neu zu browserify und versuchen npm Module in Browser zu laden, aber ich die folgende Fehlermeldung erhalten:erfordern nicht Fehler definiert mit browserify

Uncaught ReferenceError: require is not defined

ich das Tutorial von http://browserify.org/ folgenden bin. Erstellt JavaScript-Datei mit folgendem Inhalt:

var unique = require('uniq');

dann

npm install uniq

und

browserify main.js -o bundle.js

die bundle.js-Datei generiert ausgeführt wird und ich eingeschlossen es in meinem html aber immer noch das bekommen oberer Fehler. Irgendwelche Ideen was mache ich falsch?

Dies ist der Inhalt der endgültigen HTML-Datei:

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

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

</body> 
</html>

Dies ist der Inhalt von bundle.js ist: http://pastebin.com/1ECkBceB

und das ist script.js:

var unique = require('uniq');

Quelle

2015-02-24 King Julien

Können Sie mehr Code schreiben für Kontext? Was ist der Inhalt von bundle.js und script.js? – sma

@sma Nur die Frage mit dem Inhalt beider Dateien aktualisiert. –

Die Funktion "require" ist nur im Skriptkontext "bundle.js" verfügbar. Browserify nimmt alle notwendigen Skriptdateien und fügt sie in die Datei "bundle.js" ein. Sie sollten also nur "bundle.js" in die HTML-Datei einfügen, nicht die Datei "script.js".

Quelle

2015-02-24 13:11:41 kevinvile

so kann ich das Modul, das ich zu diesem Zweck gebündelt habe, nicht benötigen ..? –

Sie können "require" in dem Quellcode verwenden, den Sie schreiben, bevor Sie browserify ausführen. So können Sie in Ihrem Quelljavascript benötigen, welche Module Sie benötigen, und wenn Sie die Quelle browserisieren, wird es die gesamte Quelle (einschließlich der Module, die Sie benötigen) in die Datei "bundle.js" verpacken, auf die Sie in Ihrem HTML verweisen können. Ich hoffe, das hilft! – kevinvile

Ich verstehe jetzt - browserify erstellt kein Modul, das Sie benötigen() von einem Browser - es verpackt Ihren Code und wickelt das Ganze in eine Schließung - Sie benötigen spezielle Schritte, um eine Bibliothek zu machen, die Sie aus einem Browser verwenden können. Ich werde diese Schritte herausfinden und sie zu dieser Antwort hinzufügen, da eine gute Anzahl von Leuten das gleiche Missverständnis machen wird, das das OP und ich gemacht haben. – gburton

Kurz antwort: entferne den script.js import

Längere Antwort: Sie erhalten den Fehler, weil die Methode require nicht im Browser definiert ist. Sie sollten script.js nicht einschließen.

Die Idee hinter Browserify ist, dass Sie Ihre Quellen mithilfe von CommonJS-Modulen aufteilen und sie in einer Datei bündeln können, um sie im Browser zu verwenden. Browserify durchläuft alle Ihre Quellen und verkettet alle d-Dateien in das Bundle.

Quelle

2015-02-24 13:11:08 thomaux

Ich persönlich bevorzuge es, meinen Bibliothekscode und Anwendungscode getrennt zu halten. So erstelle ich auch etwas wie eine bundle.js und eine script.js.

gibt es eine einfache Problemumgehung, die das funktioniert. Das ist irgendwo in meinem browserify-Datei:

window.require = require;

diese require in den "global" Namespace aussetzen wird. Sie können dann alles, was Sie wollen, von Ihrer script.js anfordern.

Sie geben jedoch einen Vorteil auf: Sie müssen alle benötigten Bibliotheken in Ihre Datei browserify aufnehmen. Sie bekommen nicht den Luxus, alle Ihre Abhängigkeiten zu finden, dann!

Ich erwarte voll und ganz, dass Leute "schmutzigen Hack" weinen oder "das ist nicht so, wie es sein soll". Ja vielleicht. Aber ich möchte diese Dateien trennen. Und solange ich nichts anderes mit einbeziehe, das "require" genannt wird, geht es mir gut, vielen Dank.

Manchmal kann ein Global den Unterschied ausmachen.

Quelle

2015-08-18 21:30:06 amenthes

Es scheint, dass um ein Skript wie das zu verwenden, Sie Standalone auf dem Bundle verwenden müssen.

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

Danach Sie window.Bundle in bundle.js haben sollte.
Also an diesem Punkt sollten Sie von script.js zugreifen können.

wenn Sie grunzen verwenden

Wenn Sie grunt installieren grunt-browserify verwenden.

npm install grunt-browserify --save-dev

Und dann auf 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"] 
     } 
    } 
},

wenn Sie schlucken

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

Siehe verwenden here für Chart.js schluck Datei.

wenn Sie babel verwenden

Wenn Sie babel verwenden und es6 wahrscheinlich Sie exportieren Ihre Bundle Klasse.

// you should have something like that 

class Bundle { 
    ... 

} 

export default Bundle;

So wegen babel jetzt Bundle zu verwenden, sollten Sie Bundle.default und so verwenden:

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

diese Syntax vermeiden Sie Bundle mit Bundle.default außer Kraft setzen können.

Am Ende bundle.js einfügen:

window.Bundle = window.Bundle.default;

So, jetzt auf Sie haben werden:

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

Quellen

Standalone browserify builds

Quelle

2017-01-05 03:21:42 borracciaBlu

erfordern nicht Fehler definiert mit browserify

Antwort

wenn Sie grunzen verwenden

wenn Sie schlucken

wenn Sie babel verwenden

Quellen

Verwandte Themen