Client sur le nœud: Uncaught ReferenceError: besoin n'est pas défini

Donc, je suis à l'écriture d'une application avec le node/express + jade combo.

J'ai client.js, qui est chargé sur le client. Dans ce fichier j'ai le code qui appelle les fonctions à partir d'autres fichiers JavaScript. Mon but était d'utiliser

var m = require('./messages');

afin de charger le contenu de messages.js (tout comme je le fais sur le côté serveur) et, plus tard, sur l'appel des fonctions de ce fichier. Cependant, require n'est pas défini sur le côté client, et il déclenche une erreur de la forme Uncaught ReferenceError: require is not defined.

Ces autres fichiers JS sont également chargés de l'exécution sur le client, car je place les liens à l'en-tête de la page web. Ainsi, le client sait toutes les fonctions qui sont exportées à partir de ces autres fichiers.

Comment dois-je appeler ces fonctions à partir de ces autres fichiers JS (comme messages.js) dans les principales client.js fichier qui ouvre la socket vers le serveur?

Pourquoi ne pas simplement <script src="messages.js"></script> et de les appeler pour la suite?
Peut-être cela peut être une solution, mais il y a autre chose qui me préoccupe. J'ai aussi un fichier appelé "representation.js" pour l'abstraction de la représentation, qui est commun pour le client et le serveur. Dans ce fichier j'ai aussi exiger des déclarations et du côté serveur, il devrait être ok parce que je suis en cours d'exécution nœud. Cependant, sur le côté client, ce sera un problème. Qu'en pensez-vous?
Pour les débutants comme moi (qui ne pouvait pas même sort "mnp" il y a une semaine! :-), il peut être utile de comprendre que les browserify de --require option causes require() être défini sur le côté client. Voir: lincolnloop.com/blog/speedy-browserifying-multiple-bundles
Archer... Si il y a 100 fichiers... nous ne pouvons pas continuer sur le chargement de la, dans le HTML.........

InformationsquelleAutor MightyMouse | 2013-09-27

363

C'est parce que require() n'existe pas dans le navigateur/JavaScript côté client.

Maintenant, vous allez devoir faire des choix au sujet de votre côté client JavaScript script de gestion.

Vous disposez de trois options:
1. Utilisation <script> tag.
2. Utiliser un CommonJS mise en œuvre. Synchrone dépendances comme Node.js
3. Utiliser un AMD mise en œuvre.
CommonJS côté client-implémentations comprennent:

(la plupart d'entre eux nécessitent une étape de génération avant de déployer)
1. Browserify - Vous pouvez utiliser la plupart des Node.js les modules dans le navigateur. C'est mon favori personnel.
2. Webpack - Fait tout (bundles JS, CSS, etc). Rendu populaire par la montée de la React.js. Tristement célèbre pour ses difficile courbe d'apprentissage.
3. Cumulatif - Nouvelle prétendante. Exploite ES6 modules. Inclut un arbre qui tremble capacités (supprime le code inutilisé).
Vous pouvez lire plus au sujet de ma comparaison de Browserify vs (obsolète) Composant.

AMD implémentations comprennent:
1. RequireJS - Très populaire parmi JavaScript côté client développeurs. Pas à mon goût à cause de sa nature asynchrone.
Note, dans votre recherche de choisir d'aller avec, vous pourrez lire sur Bower. Bower est seulement pour les dépendances de package et est unopinionated sur le module de telles définitions CommonJS et AMD.

Espère que cela aide certains.
- Je vous remercie beaucoup. J'ai fait un mini-test séparément, c'est pourquoi il m'a fallu un certain temps pour répondre. Je reviendrai peut-être avec quelques questions en quelques minutes, juste pour m'assurer que je comprends comment cette magie a fonctionné. Je veux juste mettre le tout ensemble. Merci encore. Browserify semble rock! 🙂
- ajouter webpack à la liste! github.com/webpack/webpack
- Est cette réponse utile pour ma question? stackoverflow.com/questions/31150558/...
- ne pouvez-vous pas juste mnp je karma-browserify et la nécessite fonctionne?
- Je pense que JSPM devrait être ajouté à la liste.
- Pourrais-je obtenir un exemple d'utilisation de la <script> balise pour importer une Réagir la classe sans l'utilisation d'un nodeJs gestionnaire de paquets?
- Quelqu'un sait comment utiliser exiger sur le côté client avec webpack? Encore arriver "ne sont pas définis erreur"
- Je suppose que systemjs travaillera également droit... ........
- SystemJS et JSPM sont très notable des omissions.
- Ouais. Composant est maintenant obsolète github.com/componentjs/component
InformationsquelleAutor JP Richardson
13

ES6: En html comprennent les principaux js fichier à l'aide de l'attribut type="module" (prise en charge du navigateur):
```
<script type="module" src="script.js"></script>
```
Et dans script.js fichier inclure un autre fichier comme ça:
```
import { hello } from './module.js';
...
//alert(hello());
```
Dans 'module.js' vous devez la fonction d'exportation/classe que vous allez importer
```
export function hello() {
    return "Hello World";
}
```
De travail exemple ici.
- Ici, stackoverflow.com/a/44591205/860099 est écrit "Module crée un champ pour éviter les collisions de noms." sou vous pouvez manuellement mettre val à la fenêtre de l'objet window.val = val. Voici plunker: Plunker: plnkr.co/modifier/aDyjyMxO1PdNaFh7ctBT?p=preview - cette solution fonctionne
InformationsquelleAutor Kamil Kiełczewski
2

Je suis venue à partir d'un électron de l'environnement, où j'ai besoin de l'IPC de la communication entre un moteur de rendu processus et le processus principal. Le moteur de rendu processus se trouve dans un fichier HTML entre les balises script et génère la même erreur.
La ligne
```
const {ipcRenderer} = require('electron')
```
jette le Uncaught ReferenceError: besoin n'est pas défini

J'ai été en mesure de contourner ce problème en précisant nœud d'intégration vrai lorsque la fenêtre du navigateur (où ce fichier HTML est intégré) a été créé à l'origine dans le processus principal.
```
function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}
```
Qui a résolu le problème pour moi.
La solution a été proposée ici.
Espérant que cela aide quelqu'un d'autre.
Des acclamations.

InformationsquelleAutor Kibonge Murphy
1

Dans mon cas, j'ai utilisé une autre solution.

Que le projet ne nécessite pas de CommonJs et il doit avoir ES3 compatibilité des modules non pris en charge) tous vous avez besoin est juste supprimer tous les exportation et importation consolidés à partir de votre code, parce que votre tsconfig ne contient pas de
```
"module": "commonjs"
```
Mais l'utilisation d'importation et d'exportation des états dans vos fichiers référencés
```
import { Utils } from "./utils"
export interface Actions {}
```
Final code généré aura toujours(au moins pour le tapuscrit 3.0) ces lignes
```
"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();
```
InformationsquelleAutor ydanila

Même en utilisant cela ne fonctionne pas , je pense que la meilleure solution est de browserify:

module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();

InformationsquelleAutor Wael Chorfan

Vous devez vous connecter pour publier un commentaire.