Frage JavaScript requires () auf der Client-Seite


Ist es möglich zu verwenden? require() (oder etwas ähnliches) auf der Client-Seite?

Beispiel

var myClass = require('./js/myclass.js');

75
2018-03-02 13:59


Ursprung


Antworten:


Sie sollten nachsehen require.js oder head.js dafür.


40
2018-03-02 14:01



Ich habe benutzt browserifizieren dafür. Außerdem kann ich Node.js-Module in meinen clientseitigen Code integrieren.

Ich habe hier darüber gebloggt: Fügen Sie node.js / CommonJS style require () zu clientseitigem JavaScript mit browserify hinzu


20
2017-08-05 14:19



Ich habe mir dieselben Fragen gestellt. Als ich nachdachte, fand ich die Auswahl überwältigend.

Glücklicherweise fand ich diese ausgezeichnete Tabelle, die Ihnen hilft, den besten Lader zu wählen, der auf Ihren Anforderungen basiert:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ


11
2017-08-05 15:11



Wenn Sie den Node.js-Stil haben möchten require Sie können etwas wie folgt verwenden:

var require = (function () {
    var cache = {};
    function loadScript(url) {
        var xhr = new XMLHttpRequest(),
            fnBody;
        xhr.open('get', url, false);
        xhr.send();
        if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
            fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
            cache[url] = (new Function(fnBody)).call({});
        }
    }
    function resolve(module) {
        //TODO resolve urls
        return module;
    }
    function require(module) {
        var url = resolve(module);
        if (!Object.prototype.hasOwnProperty.call(cache, url)) {
            loadScript(url);
        }
        return cache[url];
    }
    require.cache = cache;
    require.resolve = resolve;
    return require;
}());

Vorsicht: Dieser Code funktioniert, ist aber unvollständig (insbesondere URL-Auflösung) und implementiert nicht alle Node.js-Funktionen (Ich habe das erst letzte Nacht zusammengefügt). SIE SOLLTEN DIESEN CODE NICHT VERWENDEN in echten Apps, aber es gibt Ihnen einen Ausgangspunkt. Ich habe es mit diesem einfachen Modul getestet und es funktioniert:

function hello() {
    console.log('Hello world!');
}

exports.hello = hello;

11
2017-12-16 15:32



Sieh dir das an Anforderungen Projekt.


9
2018-03-02 14:02



Ich habe festgestellt, dass es im Allgemeinen empfohlen wird, Skripte zur Kompilierzeit vorzuverarbeiten und sie in einem (oder sehr wenigen) Paket mit dem require während der Kompilierzeit in ein "leichtes Shim" umgeschrieben wird.

Ich habe Google nach "neuen" Tools gegooglet, die es können sollten

Und das bereits erwähnte browserify sollte auch ganz gut passen - http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

Worum geht es bei den Modulsystemen?


7
2018-04-23 05:57



Sie können Elemente für das DOM erstellen, das Elemente lädt.

Wie zum Beispiel:

var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file

3
2018-03-02 14:02



Verwenden Sie einfach Browserify, einen Compiler, der Ihre Dateien vor der Produktion verarbeitet und die Datei in Paketen verpackt.

Think Sie haben eine main.js Datei, die die Dateien Ihres Projekts benötigen, wenn Sie browserify darin ausführen, es einfach alles verarbeiten und erstellt ein Bündel mit all Ihren Dateien, die Verwendung der require ruft synchron im Browser ohne HTTP-Requests und mit sehr geringem Overhead für die Performance und für die Größe des Bundles auf.

Siehe den Link für weitere Informationen: http://browserify.org/


3
2018-02-01 17:33



Einige Antworten bereits - aber ich möchte Sie auf YUI3 und sein On-Demand-Modul laden. Es funktioniert sowohl auf dem Server (node.js) als auch auf dem Client - ich habe eine Demo-Website, die genau denselben JS-Code verwendet, der auf einem Client oder Server läuft, um die Seiten zu erstellen, aber das ist ein anderes Thema.

YUI3: http://developer.yahoo.com/yui/3/

Videos: http://developer.yahoo.com/yui/theater/

Beispiel:

(Voraussetzung: die grundlegenden YUI3-Funktionen in 7k yui.js wurden geladen)

YUI({
    //configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
    //sandboxed application code
    //...

    //If you already have a "Y" instance you can use that instead
    //of creating a new (sandbox) Y:
    //  Y.use('moduleX','moduleY', function (Y) {
    //  });
    //difference to YUI().use(): uses the existing "Y"-sandbox
}

Dieser Code lädt die YUI3-Module "node" und "io" und das Modul "own-app-module1", und dann wird die Callback-Funktion ausgeführt. Eine neue Sandbox "Y" mit allen Funktionen von YUI3 und Own-App-Modul1 wird erstellt. Im globalen Namespace wird nichts angezeigt. Das Laden der Module (.js-Dateien) erfolgt über den YUI3 Loader. Es verwendet auch die Konfiguration (optional, nicht hier anzeigen), um eine -debug- oder -min-Version der zu ladenden Module auszuwählen.


2
2018-03-02 14:10