Navegador: error de referencia no capturado: el requisito no está definido

Question 1

tengo archivo 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 funciones desde ese archivo. Sin embargo, require no está definido en el lado del cliente, y arroja un error de la forma Uncaught ReferenceError: require is not defined.

Estos otros archivos JavaScript 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 JavaScript (como messages.js) en general client.js archivo que abre el socket al servidor?

Question 2

Esto es porque require() no existe en el navegador/JavaScript del lado del cliente.

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

Tienes tres opciones:

Utilizar el <script> etiqueta.
Usar una ComúnJS implementación. Tiene dependencias síncronas como Node.js
Usa un definición de módulo asíncrono (AMD) implementación.

ComúnJS Las implementaciones del lado del cliente incluyen (la mayoría de ellas requieren un paso de compilación antes de implementar):

Navegador – Puede usar la mayoría de los módulos de Node.js en el navegador. Este es mi favorito personal.
paquete web – Hace todo (agrupa código JavaScript, CSS, etc.). Se hizo popular por el surgimiento de React, pero es conocido por su difícil curva de aprendizaje.
Enrollar – un nuevo contendiente. Aprovecha los módulos ES6 e incluye habilidades de sacudir árboles (elimina el código no utilizado).

Puedes leer más sobre mi comparación de Componente Browserify vs (obsoleto).

AMD implementaciones incluyen:

RequerirJS – Muy popular entre los desarrolladores de JavaScript del lado del cliente. No es de mi gusto por su carácter asincrónico.

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

Question 3

vengo de un Electrón entorno, donde necesito CIP comunicación entre un proceso renderizador y el proceso principal. El proceso del renderizador se encuentra en un archivo HTML entre etiquetas de secuencias de comandos y genera el mismo error.

La línea

const {ipcRenderer} = require('electron')

lanza el Error de referencia no capturado: el requerimiento no está definido

Pude solucionarlo especificando la integración de Node.js como verdadera cuando la ventana del navegador (donde está incrustado este archivo HTML) se creó originalmente en el proceso principal.

function createAddItemWindow() {

    // Create a new window
    addItemWindown = new BrowserWindow({
        width: 300,
        height: 200,
        title: 'Add Item',

        // The lines below solved the issue
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
})}

Eso resolvió el problema para mí. La solución fue propuesta aquí.

Question 4

ES6: En HTML, incluya el archivo JavaScript principal usando el atributo type="module" (compatibilidad con navegador):

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

Y en el script.js archivo, incluya otro archivo como este:

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

Dentro del archivo incluido (module.js), usted debe exportar la función/clase que vas a importar:

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

un trabajo ejemplo está aquí. Más información es aquí.

Question 5

Reemplaza todo require declaraciones con import declaraciones. Ejemplo:

// Before:
const Web3 = require('web3');

// After:
import Web3 from 'web3';

Funcionó para mí.

Question 6

En mi caso utilicé otra solución.

Como el proyecto no requiere CommonJS y debe tener compatibilidad con ES3 (los módulos no son compatibles), todo lo que necesita es solo eliminar todo exportar y importar declaraciones de su códigoporque su tsconfig no contiene

"module": "commonjs"

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

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

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

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

Question 7

esto funcionó para mí

Obtenga la última versión de la Página de descarga de RequireJS
Es el archivo para RequestJS que es lo que usaremos.
Cárguelo en su contenido HTML de esta manera:
<script data-main="your-script.js" src="require.js"></script>

¡Notas!

Usar require(['moudle-name']) en your-script.jsno require('moudle-name')

Usar const {ipcRenderer} = require(['electron'])no const {ipcRenderer} = require('electron')

Question 8

Incluso usando esto no funcionará. Creo que la mejor solución es Navegador:

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();

¿Ha sido útil esta solución?