web-dev-qa-db-fra.com

Comment utiliser UMD dans un navigateur sans dépendances supplémentaires

Supposons que j'ai un module UMD comme celui-ci (enregistré dans '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');
    }
}));

Comment puis-je utiliser ce module dans un fichier HTML comme celui-ci? (sans 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>

Merci d'avance pour toute aide.

javascripthtmlrequirejssystemjscommonjs
13
Dorival

Ok, vous utilisez donc un environnement sans RequireJS, CommonJS, SystemJS, etc.

La ligne de clé est factory((global.mymodule = global.mymodule || {})) ceci fait quelques choses:

  1. Si global.mymodule vérité, alors cela équivaut à 

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

  2. Sinon, cela équivaut à:

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

Dans l'usine : Votre usine doit exporter ce que vous voulez exporter de votre module en attribuant à exports. Donc, vous exporteriez myFunction en faisant exports.myFunction = myFunction.

En dehors de l'usine : En dehors des valeurs exportées, les valeurs exportées seront mymodule dans l'espace global. Lorsque vous souhaitez utiliser myFunction, par exemple, vous utilisez mymodule.myFunction(...).

Au cas où ce ne soit pas clair. La fabrique dans votre code est la fonction qui commence par function (exports) {, où vous avez correctement mis myFunction.

13
Louis

Réponse simple: si vous utilisez UMD habituel, il devrait être disponible dans window.mymodule (ou quel que soit le nom que lib ait).

6
Vladimir Tolstikov

Voici un exemple comment restituer le composant UMD React :

<!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