Cliente no nó: Uncaught ReferenceError: require não está definido

Então, eu estou escrevendo um aplicativo com o nó / express + jade combo.

Eu tenho client.js, que é carregado no cliente. Nesse arquivo, eu tenho um código que chama funções de outros arquivos JavaScript. Minha tentativa foi usar

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

para carregar o conteúdo de messages.js(como eu faço no lado do servidor) e, posteriormente, chamar funções desse arquivo. No entanto, requirenão está definido no lado do cliente e gera um erro no formulário Uncaught ReferenceError: require is not defined.

Esses outros arquivos JS também são carregados em tempo de execução no cliente porque eu coloco os links no cabeçalho da página da web. Portanto, o cliente conhece todas as funções que são exportadas desses outros arquivos.

Como chamo essas funções desses outros arquivos JS (como messages.js) no client.jsarquivo principal que abre o soquete para o servidor?

Isso ocorre porque require()não existe no JavaScript do navegador / lado do cliente.

Agora você terá que fazer algumas escolhas sobre o gerenciamento de scripts JavaScript do lado do cliente.

Você tem três opções:

1. Use <script>tag.
2. Use uma implementação CommonJS . Dependências síncronas como Node.js
3. Use uma implementação da AMD .

Commonjs cliente colaterais implementações incluem:

(a maioria deles exige uma etapa de construção antes da implantação)

1. Browserify - Você pode usar a maioria dos módulos Node.js. no navegador. Este é o meu favorito.
2. Webpack - Faz de tudo (pacotes JS, CSS, etc). Tornado popular pelo aumento do React.js. Notório por sua difícil curva de aprendizado.
3. Rollup - Novo candidato. Aproveita os módulos ES6. Inclui habilidades de abanar árvores (remove o código não utilizado).

Você pode ler mais sobre minha comparação entre o Browserify e o componente (obsoleto) .

As implementações da AMD incluem:

1. RequireJS - Muito popular entre os desenvolvedores de JavaScript do lado do cliente. Não é o meu gosto por causa de sua natureza assíncrona.

Observe que, em sua pesquisa para escolher qual deles, você lerá sobre o Bower . O Bower é apenas para dependências de pacotes e não é pioneiro em definições de módulos como CommonJS e AMD.

Espero que isso ajude alguns.

Eu sou proveniente de um ambiente de elétrons, onde preciso da comunicação IPC entre um processo de renderizador e o processo principal. O processo do renderizador fica em um arquivo HTML entre as tags de script e gera o mesmo erro. A linha

const {ipcRenderer} = require('electron')

lança o Uncaught ReferenceError: require não está definido

Consegui contornar isso especificando a integração do nó como verdadeira quando a janela do navegador (onde esse arquivo HTML está incorporado) foi criada originalmente no processo 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
    }
})}

Isso resolveu o problema para mim. A solução foi proposta aqui . Espera que isso ajude outra pessoa. Felicidades.

ES6: No html, inclua o arquivo js principal usando o atributo type="module"( suporte ao navegador ):

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

E no script.jsarquivo inclua outro arquivo como esse:

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

Dentro do arquivo incluído ( module.js), você deve exportar a função / classe que você importará

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

Exemplo de trabalho aqui .

No meu caso, usei outra solução.

Como o projeto não requer CommonJs e deve ter compatibilidade com ES3 (módulos não suportados), basta remover todas as instruções de exportação e importação do seu código , porque o seu tsconfig não contém

"module": "commonjs"

Mas use instruções de importação e exportação em seus arquivos referenciados

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

O código final gerado sempre terá (pelo menos para o texto datilografado 3.0) essas linhas

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

Mesmo usando isso não funcionará, acho que a melhor solução é o 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();

Isso funcionou para mim

1. salve este arquivo https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. carregue no seu HTML como esta
   <script data-main="your-Scrpt.js" src="require.js"></script>
   Nota!
   use: -> require (['moudle-name']) em "your-script.js"
   não requer ('moudle-name')
   const {ipcRenderer} = require (['electron'])
   Não: const {ipcRenderer} = require ('electron')