☰

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

tag-icon • tag-icon javascript html requirejs systemjs commonjs
追加の依存関係なしでブラウザで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>

ご協力いただければ幸いです。

ベストアンサー1

さて、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エクスポートします。myFunctionexports.myFunction = myFunction

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

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

おすすめ記事