Wie UMD in Browser ohne zusätzliche Abhängigkeiten

Angenommen, ich habe ein UMD-Modul wie folgt verwenden (gespeichert in 'js/mymodule.js'):Wie UMD in Browser ohne zusätzliche Abhängigkeiten

(function (global, factory) { 
    typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports) : 
    typeof define === 'function' && define.amd ? define(['exports'], factory) : 
    (factory((global.mymodule = global.mymodule || {}))); 
}(this, function (exports) { 'use strict'; 
    function myFunction() { 
     console.log('hello world'); 
    } 
}));

Wie kann ich dieses Modul in ein verwenden HTML-Datei so? (Ohne requirejs, Commonjs, systemjs, etc ...)

<!doctype html> 
<html> 
<head> 
    <title>Using MyModule</title> 
    <script src="js/mymodule.js"></script> 
</head> 
<body> 
<script> 
/* HOW TO USE myFunction from mymodule.js ??? */ 
</script> 
</body> 
</html>

Vielen Dank im Voraus für jede Hilfe.

Quelle

2016-07-28 Dorival

-2

Das AMD-Modulformat wird asynchron geladen, sodass Sie die Datei nicht direkt in einem Skript-Tag referenzieren können. Wenn dies für die Entwicklung verwendet wird, können Sie einen Loader wie requirejs verwenden (siehe this link unter amd specifics). Wenn Sie dies im Produktionsmodus verwenden möchten, dann sind ein paar Alternativen:

1) Verwenden Sie requirjs, aber führen Sie den Optimierungsprozess, der die AMD-Dateibündelt 2) Verwenden Sie einen anderen Minimierungsprozess, wie webpack oder baue es in dein Frontend Tooling (Grunt, Schluck etc).

Ich habe Angst in Bezug auf das Laden der Datei direkt, dies ist nicht möglich, aufgrund der Art von AMD (Fähigkeit, Abhängigkeiten zu anderen Modulen zu deklarieren).

Hoffe, das hilft.

Quelle

2016-07-28 13:58:03 paddybasi

Ich fürchte, Sie vermischen UMD mit AMD. –

Ok, so dass Sie in einer Umgebung ohne RequireJS, Commonjs, SystemJS laufen usw.

Der Schlüssel Linie ist factory((global.mymodule = global.mymodule || {})) dies tut, ein paar Dinge:

Wenn global.mymodule truthy, dann zu

global.mymodule = global.mymodule // A noop. 
factory(global.mymodule)

Ansonsten äquivalent ist, ist es gleichbedeutend mit:
```
global.mymodule = {} 
factory(global.mymodule) 
```

Im Inneren der Fabrik: Ihre Fabrik sollten Sie exportieren, was Sie von Ihrem Modul exportieren möchten, indem auf exports zuweisen. Sie würden also myFunction exportieren, indem Sie exports.myFunction = myFunction tun.

Außerhalb der Fabrik: Außerhalb werden die exportierten Werte auf mymodule, die in den globalen Raum exportiert wurde. Wenn Sie beispielsweise myFunction verwenden möchten, tun Sie mymodule.myFunction(...).

Falls das nicht klar ist. Die Fabrik in Ihrem Code ist die Funktion, die mit function (exports) { beginnt, wo Sie myFunction richtig gesetzt haben.

Quelle

2016-07-28 16:37:34 Louis

Dies ist die beste Antwort und gibt viele Informationen, die sonst vergraben und versteckt sind. Jeder scheint zu erwarten, dass Sie RequireJS, SystemJS, Webpack usw. verwenden werden. –

Ich kam zu dieser Seite, als ich versuchte, eine gebündelte UMD-Datei zu verwenden, die mit Rollup erstellt wurde.Große Frage und gute Antwort ... –

Einfache Antwort: Wenn Sie gewöhnliche UMD verwenden, sollte es in window.mymodule (oder was auch immer Name lib hat) verfügbar sein.

Quelle

2016-11-25 10:36:57

Wie UMD in Browser ohne zusätzliche Abhängigkeiten

Antwort

Verwandte Themen