it-swarm.com.de

Verwendung von UMD im Browser ohne zusätzliche Abhängigkeiten

Angenommen, ich habe ein solches UMD-Modul (gespeichert in 'js/mymodule.js' ):

(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 einer solchen HTML-Datei verwenden? (ohne requires, 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.

13
Dorival

Ok, Sie laufen also in einer Umgebung ohne RequireJS, CommonJS, SystemJS usw.

Die Schlüsselzeile lautet factory((global.mymodule = global.mymodule || {})). Dies bewirkt ein paar Dinge:

  1. Wenn global.mymodule wahr ist, ist es äquivalent zu 

    global.mymodule = global.mymodule // A noop.
    factory(global.mymodule)
    
  2. Ansonsten entspricht es:

    global.mymodule = {}
    factory(global.mymodule)
    

In der Fabrik : Ihre Fabrik sollte exportiert werden, was Sie aus Ihrem Modul exportieren möchten, indem Sie exports zuweisen. Sie würden also myFunction exportieren, indem Sie exports.myFunction = myFunction ausführen.

Außerhalb der Fabrik : Außerhalb der Fabrik befinden sich die exportierten Werte auf mymodule, die in den globalen Bereich exportiert wurden. Wenn Sie beispielsweise myFunction verwenden möchten, verwenden Sie mymodule.myFunction(...).

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

13
Louis

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

6

Hier ein Beispiel, wie man die UMD React-Komponente rendern kann :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="my-component.js"></script>
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script>
    ReactDOM.render(
      React.createElement(MyComponent),
      document.getElementById('root')
    );
  </script>
</body>
</html>

1
iqqmuT