Klient na węźle.js: Uncaught ReferenceError: require nie jest zdefiniowane
Piszę aplikację z węzłem.js, Express.JS i Jade kombinacja.
Mam plik client.js
, który jest załadowany na klienta. W tym pliku Mam kod, który wywołuje funkcje z innych plików JavaScript. Moją próbą było użycie
var m = require('./messages');
W celu załadowania zawartości messages.js
(tak jak robię po stronie serwera), a później wywołania funkcji z tego pliku. Jednak require
nie jest zdefiniowany po stronie klienta, i rzuca błąd formularza Uncaught ReferenceError: require is not defined
.
Te inne pliki JavaScript są również ładowane w czasie wykonywania u klienta, ponieważ umieszczam linki w nagłówku strony internetowej. Więc klient zna wszystkie funkcje, które są eksportowane z tych innych plików.
Jak wywołać te funkcje z innych plików JavaScript (takich jak messages.js
) w głównym pliku client.js
, który otwiera gniazdo na serwer?
8 answers
Dzieje się tak dlatego, że require()
nie istnieje w JavaScript po stronie przeglądarki/klienta.
Teraz będziesz musiał dokonać pewnych wyborów dotyczących zarządzania skryptami JavaScript po stronie klienta.
Masz trzy opcje:
- użyj znacznika
<script>
. - użyj implementacji CommonJS. Posiada synchroniczne zależności jak Node.js
- użyj implementacji asynchronicznej definicji modułu (AMD).
CommonJS klient implementacje poboczne obejmują (większość z nich wymaga kroku kompilacji przed wdrożeniem):
- Browserify - możesz użyć większości węzłów.Moduły js w przeglądarce. To mój ulubiony.
- Webpack - robi wszystko ( łączy kod JavaScript, CSS, itp.). Stał się popularny dzięki fali Reacta, ale jest znany ze swojej trudnej krzywej uczenia się.
- Rollup - nowy zawodnik. Wykorzystuje moduły ES6 i obejmuje drżenie drzew umiejętności (usuwa nieużywany kod).
Możesz przeczytać więcej o moim porównaniu Browserify vs (przestarzały) Składnik .
Implementacje AMD obejmują:
- RequireJS - bardzo popularny wśród programistów JavaScript po stronie klienta. Nie jest to mój gust ze względu na jego asynchroniczny charakter.
Uwaga, w poszukiwaniu wyboru, który z nich wybrać, przeczytasz o Bower. Bower jest tylko dla zależności pakietów i jest nieopiniowana w definicjach modułów, takich jak CommonJS i AMD.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 22:46:44
Pochodzę ze środowiska Electron , gdzie potrzebuję IPC komunikacji pomiędzy procesem renderującym a procesem głównym. Proces renderujący znajduje się w pliku HTML między znacznikami skryptu i generuje ten sam błąd.
Linia
const {ipcRenderer} = require('electron')
Rzuca Uncaught ReferenceError: require nie jest zdefiniowane
Udało mi się to obejść, określając węzeł.integracja js jako prawdziwa, gdy okno przeglądarki (w którym osadzony jest ten plik HTML) było pierwotnie utworzony w procesie głównym.
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
}
})}
To rozwiązało problem. Rozwiązanie zaproponowano tutaj .Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 22:59:55
ES6: W HTML Dołącz główny plik JavaScript za pomocą atrybutu type="module"
(obsługa przeglądarek):
<script type="module" src="script.js"></script>
I w pliku script.js
Dołącz inny plik, taki jak ten:
import { hello } from './module.js';
...
// alert(hello());
Wewnątrz dołączonego pliku (module.js
), musisz wyeksportować funkcję / klasę , którą zaimportujesz:
export function hello() {
return "Hello World";
}
Działa przykład jest tutaj . Więcej informacji jest tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 22:52:00
Zamień wszystkie require
na import
. Przykład:
// Before:
const Web3 = require('web3');
// After:
import Web3 from 'web3';
U mnie zadziałało.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 23:03:34
W moim przypadku użyłem innego rozwiązania.
Ponieważ projekt nie wymaga CommonJS i musi mieć kompatybilność z ES3 (Moduły nie są obsługiwane), wystarczy usunąć wszystkie export i import z twojego kodu, ponieważ tsconfig nie zawiera
"module": "commonjs"
Ale używaj instrukcji importu i eksportu w plikach, do których się odwołujesz
import { Utils } from "./utils"
export interface Actions {}
Końcowy wygenerowany kod będzie zawsze miał (przynajmniej dla TypeScript 3.0) takie linie
"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 22:56:07
Nawet używanie tego nie zadziała. Myślę, że najlepszym rozwiązaniem jest 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();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 22:57:35
Potwierdzam. Musimy dodać:
webPreferences: {
nodeIntegration: true
}
Na przykład:
mainWindow = new BrowserWindow({webPreferences: {
nodeIntegration: true
}});
Dla mnie problem został rozwiązany z tym.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 23:04:24
This worked for me
- Zapisz plik https://requirejs.org/docs/release/2.3.5/minified/require.js . jest to plik dla RequestJS, którego będziemy używać.
- załaduj go do swojej zawartości HTML w następujący sposób:
<script data-main="your-script.js" src="require.js"></script>
Uwaga!
Użycie require(['moudle-name'])
in your-script.js
,
nie require('moudle-name')
Use const {ipcRenderer} = require(['electron'])
,
nie const {ipcRenderer} = require('electron')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-29 23:02:39