web-dev-qa-db-fra.com

"Uncaught ReferenceError: require n'est pas défini" avec Angular 2/webpack

Je travaille un modèle HTML d'une entreprise de graphisme dans mon projet Angular 2 en utilisant node et webpack.

Le HTML extrait différents scripts comme ceci:

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

donc je les exige dans mon composant.ts:

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

Il existe également plusieurs autres scripts et certains SASS qui semblent fonctionner correctement.

webpack est heureux et construit tout cela et un "démarrage de npm" est également une réussite. Cependant, quand il atteint le navigateur, je reçois cette plainte:

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

qui est en fait jeté par cette ligne de url.js:

var punycode = require('punycode');

Est-ce un besoin de CommonJs? Je n'avais pas utilisé cela auparavant dans le développement Web il y a quelques semaines, donc je ne comprends toujours pas les différentes exigences de webback, CommonJs, etc.

Un extrait de mon fichier webpack.config.js pour le chargeur .js se présente comme suit:

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

Comment puis-je contourner cette erreur?

javascriptnode.jsangularwebpack
24
serlingpa

WebPack peut le faire seul. Vous devez vous assurer que vous chargez d'abord le bloc initial à l'aide d'une balise script src. Ce sera généralement la valeur de l'entrée: clé dans la configuration WebPack avec -bundle ajouté. Si vous n'effectuez pas de fractionnement explicite, votre bloc d'entrée doit être à la fois un bloc initial et un bloc d'entrée et inclure le runtime WebPack. Le runtime WebPack contient et charge la fonction require avant que votre code ne soit exécuté.

Vos composants ou tout ce dont vous avez besoin doivent être demandés dans le fichier d'entrée, car vos scripts commenceront à cet endroit. Fondamentalement, si vous ne faites pas un regroupement explicite, le fichier JS de point d’entrée est le seul que vous puissiez inclure avec le script src. Tout le reste doit lui être demandé. Ce que vous incluez aura généralement bundle dans le nom de fichier JS. Par défaut, il devrait s'agir de main-bundle.js.

9
Mark H.

Pour ceux qui cherchent une réponse mais que ce qui précède ne fonctionne pas:

Court

Ajoutez ou remplacez la target actuelle dans webpack.config.js par target: 'web'

Un peu plus longtemps

Webpack a différents cibles , si vous avez essayé cela et changé votre cible en node, elle utilisera 'require' pour charger des tronçons. La meilleure chose à faire est de définir votre cible (ou d’ajouter) target: 'web' dans votre webpack.config.js. Ceci est la cible par défaut et charge vos tronçons de la manière que le navigateur peut gérer. 

J'ai finalement trouvé cette solution ici .

0
Maniflames

Vous pouvez le faire en une ligne en supposant que vous avez 

  • le paquet dans dist/bundle.js

  • le code client du fichier source qui rendra la page dans le navigateur en client/client.js

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

Vous devez réexécuter webpack car si certaines sources de la bibliothèque changent, vous obtenez les dernières modifications dans le paquet dist/bundle.js (bien sûr, vous pouvez ajouter une tâche de surveillance de fichier grunt pour cela). webpack-dev-server exécutera alors le serveur.

0
loretoparisi