wake-up-neo.com

"Nicht gefundener ReferenceError: required ist nicht definiert" mit Angular 2/webpack

Ich bearbeite eine HTML-Vorlage von einem Grafikdesignunternehmen in mein Angular 2-Projekt unter Verwendung von node und webpack.

Das HTML zieht verschiedene Skripte wie folgt ein:

<script src="js/jquery.icheck.min.js"></script>
<script src="js/waypoints.min.js"></script>

also benötige ich sie in meinen components.ts:

var icheckJs = require('../js/jquery.icheck.min');
var waypointsJs = require('../js/waypoints.min');

Es gibt auch einige andere Skripte und einige SASS, die scheinbar korrekt funktionieren.

webpack ist glücklich und baut alles und ein 'npm start' ist auch erfolgreich. Wenn er jedoch den Browser erreicht, erhalte ich folgende Beschwerde:

Uncaught ReferenceError: require is not defined node_modules/angular2/platform/browser.js:1 Uncaught ReferenceError: require is not defined

welche tatsächlich von dieser Zeile von url.js geworfen wird:

var punycode = require('punycode');

Ist das ein CommonJs? Ich hatte das vor ein paar Wochen noch nicht in der Webentwicklung verwendet, also löse ich immer noch die verschiedenen Anforderungen an Webback, CommonJs et.

Ein Auszug aus meiner webpack.config.js für den .js-Loader sieht folgendermaßen aus:

{ test: /\.js$/, loader: 'script' }

Wie kann ich diesen Fehler umgehen?

24
serlingpa

WebPack kann dies alleine tun. Sie müssen sicherstellen, dass Sie den ersten Abschnitt zuerst mit einem Skript-SRC-Tag laden. In der Regel ist dies der Wert des Eintrags: key in der WebPack-Konfiguration mit angehängtem -bundle. Wenn Sie kein explizites Chunking durchführen, sollte Ihr Eintragsblock sowohl ein Anfangs- als auch ein Eingangsblock sein und die WebPack-Laufzeitumgebung enthalten. Die WebPack-Laufzeitumgebung enthält und lädt die Anforderungsfunktion, bevor der Code ausgeführt wird.

Ihre Komponenten oder was auch immer Sie benötigen, müssen aus der Eingabedatei abgerufen werden, da Ihre Skripts dort beginnen. Wenn Sie nicht explizit chunkern, ist die Einstiegspunkt-JS-Datei die einzige, die Sie mit dem Skript src hinzufügen können. Alles andere muss von ihm verlangt werden. Was Sie einschließen, enthält normalerweise ein Paket im JS-Dateinamen. Standardmäßig sollte es main-bundle.js sein.

9
Mark H.

Für jeden, der nach einer Antwort sucht, aber das oben genannte nicht funktioniert:

Kurz

Hinzufügen oder Ersetzen der aktuellen target in webpack.config.js zu target: 'web'

Ein bisschen länger

Webpack hat andere Ziele , wenn Sie damit experimentiert haben und Ihr Ziel in node geändert hat, wird 'Requirement' zum Laden von Chuncks verwendet. .__ Das Beste ist, Ihr Ziel festzulegen (oder hinzuzufügen) target: 'web' in Ihrem webpack.config.js. Dies ist das Standardziel und lädt Ihre Chuncks auf eine Weise, die der Browser verarbeiten kann. 

Ich fand diese Lösung schließlich hier .

0
Maniflames

Sie können dies in einer Zeile tun, vorausgesetzt, Sie haben dies getan 

  • das Bundle in dist/bundle.js
  • der Quelldatei-Clientcode, der die Seite im Browser in client/client.js rendert

    webpack && webpack ./client/client.js dist/bundle.js \ && webpack-dev-server --progress --color

Sie müssen webpack erneut ausführen, da bei einigen Quellen in der Bibliothek die letzten Änderungen im dist/bundle.js-Paket angezeigt werden (natürlich können Sie dazu eine grunt-Dateiüberwachungsaufgabe hinzufügen). webpack-dev-server wird den Server dann ausführen.

0
loretoparisi