Cliente en el nodo: Error de referencia no capturado: el requisito no está definido

Entonces, estoy escribiendo una aplicación con el nodo / express + jade combo.

Tengo client.js, que se carga en el cliente. En ese archivo tengo un código que llama a funciones de otros archivos JavaScript. Mi intento fue usar

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

para cargar el contenido de messages.js(al igual que lo hago en el lado del servidor) y luego llamar a las funciones de ese archivo. Sin embargo, requireno está definido en el lado del cliente, y arroja un error del formulario Uncaught ReferenceError: require is not defined.

Estos otros archivos JS también se cargan en tiempo de ejecución en el cliente porque coloco los enlaces en el encabezado de la página web. Entonces, el cliente conoce todas las funciones que se exportan desde estos otros archivos.

¿Cómo llamo a estas funciones desde estos otros archivos JS (como messages.js) en el client.jsarchivo principal que abre el socket al servidor?

Esto se debe a require()que no existe en el navegador / JavaScript del lado del cliente.

Ahora tendrá que tomar algunas decisiones sobre la gestión de secuencias de comandos JavaScript del lado del cliente.

Tienes tres opciones:

1. Usar <script>etiqueta
2. Use una implementación de CommonJS . Dependencias sincrónicas como Node.js
3. Use una implementación de AMD .

Las implementaciones del lado del cliente CommonJS incluyen:

(la mayoría de ellos requieren un paso de compilación antes de implementar)

1. Browserify : puede usar la mayoría de los módulos de Node.js en el navegador. Este es mi favorito personal.
2. Webpack : hace todo (paquetes JS, CSS, etc.). Hecho popular por el surgimiento de React.js. Conocido por su difícil curva de aprendizaje.
3. Rollup - Nuevo contendiente. Aprovecha los módulos ES6. Incluye habilidades para sacudir árboles (elimina el código no utilizado).

Puede leer más sobre mi comparación de Browserify vs (en desuso) Componente .

Las implementaciones de AMD incluyen:

1. RequireJS : muy popular entre los desarrolladores de JavaScript del lado del cliente. No es de mi gusto debido a su naturaleza asincrónica.

Tenga en cuenta que, en su búsqueda para elegir con cuál ir, leerá sobre Bower . Bower es solo para dependencias de paquetes y no se opina en las definiciones de módulos como CommonJS y AMD.

Espero que esto ayude un poco.

Vengo de un entorno de electrones, donde necesito comunicación IPC entre un proceso de renderizador y el proceso principal. El proceso de representación se encuentra en un archivo HTML entre las etiquetas de script y genera el mismo error. La línea

const {ipcRenderer} = require('electron')

arroja el Error de referencia no capturado: el requisito no está definido

Pude evitar eso al especificar la integración de nodos como verdadera cuando la ventana del navegador (donde está incrustado este archivo HTML) se creó originalmente en el proceso 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
    }
})}

Eso resolvió el problema para mí. La solución fue propuesta aquí . Espera que esto ayude a alguien más. Salud.

ES6: en html, incluya el archivo js principal usando el atributo type="module"( soporte de navegador )

<script type="module" src="script.js"></script>

Y en el script.jsarchivo incluye otro archivo como ese:

import { hello } from './module.js';
...
// alert(hello());

Dentro del archivo incluido ( module.js) debe exportar la función / clase que importará

export function hello() {
    return "Hello World";
}

Ejemplo de trabajo aquí .

En mi caso usé otra solución.

Como el proyecto no requiere CommonJs y debe tener compatibilidad con ES3 (no se admiten módulos), todo lo que necesita es eliminar todas las declaraciones de exportación e importación de su código , porque su tsconfig no contiene

"module": "commonjs"

Pero use declaraciones de importación y exportación en sus archivos referenciados

import { Utils } from "./utils"
export interface Actions {}

El código final generado siempre tendrá (al menos para el mecanografiado 3.0) tales líneas

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();

Incluso usar esto no funcionará, creo que la mejor solución es 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();

Esto funcionó para mí

1. guarde este archivo https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. cargar en su HTML como esta
   <script data-main="your-Scrpt.js" src="require.js"></script>
   Nota!
   use: -> require (['moudle-name']) en "your-script.js"
   no requiere ('nombre-moudle')
   const {ipcRenderer} = require (['electron'])
   No: const {ipcRenderer} = require ('electron')