Düğümdeki istemci: Yakalanmayan ReferenceError: gereksinim tanımlanmadı

Bu yüzden node / express + jade combo ile bir uygulama yazıyorum.

Ben client.jsistemci üzerinde yüklü olan,. Bu dosyada diğer JavaScript dosyalarından işlevleri çağıran kod var. Benim girişimim

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

messages.js(sunucu tarafında yaptığım gibi) ve daha sonra bu dosyadan çağrı işlevlerinin içeriğini yüklemek için . Ancak, requireistemci tarafında tanımlanmaz ve formda bir hata atar Uncaught ReferenceError: require is not defined.

Bağlantıları web sayfasının başlığına yerleştirdiğim için bu diğer JS dosyaları da istemcide çalışma zamanında yüklenir. Böylece istemci bu diğer dosyalardan dışa aktarılan tüm fonksiyonları bilir.

Soketi sunucuya açan messages.jsana client.jsdosyadaki bu diğer JS dosyalarından (örneğin ) bu işlevleri nasıl çağırırım ?

Bunun nedeni require(), tarayıcı / istemci tarafı JavaScript'te bulunmamasıdır.

Şimdi, istemci tarafı JavaScript komut dosyası yönetiminiz hakkında bazı seçimler yapmanız gerekecek.

Üç seçeneğiniz var:

1. <script>Etiketi kullan .
2. Bir CommonJS uygulaması kullanın . Node.js gibi senkron bağımlılıklar
3. Bir AMD uygulaması kullanın .

CommonJS istemci yan uygulamaları şunları içerir:

(çoğu konuşlandırmadan önce bir oluşturma adımı gerektirir)

1. Browserify - Tarayıcıda çoğu Node.js modülünü kullanabilirsiniz. Bu benim kişisel favorim.
2. Webpack - Her şeyi yapar (JS, CSS vb. Paketleri). React.js dalgalanması ile popüler hale getirildi. Zor öğrenme eğrisi ile tanınıyor.
3. Toplama - Yeni rakip. ES6 modüllerinden yararlanır. Ağaç sallama yeteneklerini içerir (kullanılmayan kodu kaldırır).

Browserify vs (kullanımdan kaldırıldı) Bileşeni karşılaştırmam hakkında daha fazla bilgi edinebilirsiniz .

AMD uygulamaları şunları içerir:

1. RequireJS - İstemci tarafı JavaScript geliştiricileri arasında çok popüler. Eşzamansız doğası nedeniyle benim zevkim değil.

Hangisiyle gideceğinizi seçtiğinizde Bower hakkında bilgi edineceksiniz . Bower yalnızca paket bağımlılıkları içindir ve CommonJS ve AMD gibi modül tanımlarında açık değildir.

Umarım bu biraz yardımcı olur.

Oluşturucu süreci ile ana süreç arasında IPC iletişimine ihtiyaç duyduğum bir elektron ortamından geliyorum. Oluşturucu işlemi, komut dosyası etiketleri arasındaki bir HTML dosyasında oturur ve aynı hatayı oluşturur. Çizgi

const {ipcRenderer} = require('electron')

Yakalanmamış ReferenceError değerini atar : requir tanımlanmamış

Tarayıcı penceresinin (bu HTML dosyasının gömülü olduğu yerde) başlangıçta ana süreçte oluşturulduğu zaman düğüm entegrasyonunu doğru olarak belirleyerek bu sorunu çözebildim.

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

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

Bu benim için sorunu çözdü. Çözüm burada önerildi . Umarım bu başka birine yardımcı olur. Şerefe.

ES6: Html'ye özniteliği kullanan ana js dosyasını dahil et type="module"( tarayıcı desteği ):

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

Ve script.jsdosyaya bunun gibi başka bir dosya ekleyin:

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

Dahil edilen file ( module.js) içinde içe aktaracağınız işlevi / sınıfı dışa aktarmanız gerekir

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

Burada çalışma örneği .

Benim durumumda başka bir çözüm kullandım.

Proje CommonJ'leri gerektirmediğinden ve ES3 uyumluluğuna (modüller desteklenmiyor) sahip olması gerektiğinden, tek yapmanız gereken kodunuzdaki tüm dışa aktarma ve içe aktarma ifadelerini kaldırmaktır , çünkü tsconfig'iniz içermiyor

"module": "commonjs"

Ancak referans dosyalarınızda içe ve dışa aktarma ifadeleri kullanın

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

Nihai oluşturulan kod her zaman bu tür satırlara sahip olacaktır (en azından daktilo 3.0 için)

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

Bunu kullanmak bile işe yaramaz, en iyi çözüm browserify olduğunu düşünüyorum:

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

Bu Benim İçin Çalıştı

1. bu dosyayı kaydet https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. HTML'nize bu
   <script data-main="your-Scrpt.js" src="require.js"></script>
   Not gibi yükleyin !
   kullanın: -> "your-script.js" dosyasında (['moudle-name']) gerektirir (['moudle-name'])
   gerekli değil ('moudle-name')
   const {ipcRenderer} = gerektirir (['elektron'])
   Not: const {ipcRenderer} = gerektirir ('elektron')