javascript - not - require en js

Cliente en el nodo: Uncaught ReferenceError: require no está definido

Question

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

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 (como lo hago en el lado del servidor) y luego llamar a las 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 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. Así que 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 archivo principal client.js que abre el socket al servidor?

Answer 1

En mi caso utilicé otra solución.

Como el proyecto no requiere CommonJs y debe tener compatibilidad con ES3 (no se admiten los módulos), todo lo que necesita es simplemente eliminar todas las declaraciones de exportación e importación de su código , ya que 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 final generado siempre tendrá (al menos para mecanografiado 3.0) tales líneas

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

Answer 2

Esto se debe a que 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:

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

Las implementaciones de cliente de 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 Node.js en el navegador. Este es mi favorito personal.
2. Webpack - Hace todo (paquetes JS, CSS, etc). Se hizo popular por la oleada de React.js. Notorio por su difícil curva de aprendizaje.
3. Rollup - Nuevo contendiente. Aprovecha los módulos ES6. Incluye habilidades de sacudir árboles (elimina el código no utilizado).

Puedes leer más sobre mi comparación de Browserify vs Component .

Las implementaciones de AMD incluyen:

1. RequireJS - Muy popular entre los desarrolladores de JavaScript del lado del cliente. No es mi gusto por su naturaleza asíncrona.

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 está inscrito en definiciones de módulos como CommonJS y AMD.

Espero que esto ayude a algunos.

Answer 3

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

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

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

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

En ''module.js'' debe exportar la función / clase que importará

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

Ejemplo de trabajo aquí .

Answer 4

Even using this won''t work , I think the best solution is browserify
-common.js-
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();