web-dev-qa-db-ja.com

追加の依存関係なしでブラウザでUMDを使用する方法

次のようなUMDモジュールがあるとします（'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');
    }
}));

このようなHTMLファイルでこのモジュールを使用するにはどうすればよいですか？ （requirejs、commonjs、systemjsなどなし...）

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

助けてくれてありがとう。

javascripthtmlrequirejssystemjscommonjs
20
Dorival

それでは、RequireJS、CommonJS、SystemJSなどのない環境で実行しています。

重要な行はfactory((global.mymodule = global.mymodule || {}))です。これはいくつかのことを行います。

  1. _global.mymodule_が真実の場合、次と同等です。

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

  2. それ以外の場合は、次と同等です。

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

ファクトリー内：ファクトリーは、exportsに割り当てて、モジュールからエクスポートするものをエクスポートする必要があります。したがって、_exports.myFunction = myFunction_を実行してmyFunctionをエクスポートします。

工場の外：外では、エクスポートされた値はグローバルスペースにエクスポートされたmymoduleにあります。たとえば、myFunctionを使用する場合は、mymodule.myFunction(...)を実行します。

それが明確でない場合。コードのファクトリーはfunction (exports) {で始まる関数で、myFunctionを正しく配置しています。

16
Louis

簡単な答え：通常のUMDを使用している場合は、window.mymodule（またはlibの名前）。

7
Vladimir Tolstikov

以下に例を示します レンダー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>
2
iqqmuT

現在の形式では、myModule（jsからmyFunction（）を使用することはできません。 myModule.jsは何も公開（エクスポート）していません。最初にこの行をmyModule.jsに追加する必要があります


exports.myFunction = myFunction;

あなたのモジュールコードは次のようになります：


(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');
  }
  // expose the inner function on the module to use it
  exports.myFunction = myFunction;
}));

このコードを.htmlファイルで実行すると、ブラウザは、このメソッド 'myFunction'を持つ 'mymodule'というグローバルオブジェクトを作成します。

このメソッドは、.htmlファイルで次のように呼び出すことができます。

myModule.myFunction();

完全な.htmlファイルは次のようになります。


    <!doctype html>
    <html>
    <head>
        <title>Using MyModule</title>
        <script src="js/mymodule.js"></script>
    </head>
    <body>
    <script>
    /* HOW TO USE myFunction from mymodule.js ??? */
    /* Answer: */
    mymodule.myFunction();
    </script>
    </body>
    </html>
0
Praym