javascript モジュールを作成する

javascript モジュールを作成する

javascriptで、ES6(ECMAScript 2015)から利用することができるモジュールを作成する方法を記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

モジュール作成

「hoge.js」というファイル名で、export文を使用して以下のコードを記述します。

次に、import文を作成したモジュールを実際に利用してみます。

import文にある、fromは、「./」「../」「/」を使ったパスで記述しなければエラーとなります。

モジュールはjsファイルで作成することができ、export文を使用して、エクスポートして、エクスポートされたモジュールをimport文を使って、利用することが可能です。

また、モジュールは「常に Strict mode として動作」します。

以下のように、URLを指定して importを行うことも可能です。

複数エクスポートすることも可能です。

エクスポート側

インポート側

まとめて宣言することも可能です。

defaultエクスポート

defaultエクスポートを使用すると、1つしかエクスポートできないモジュールを作成することができます。

インポートする際の名前は、任意となります。

他のものをインポートしようとするとエラーになります。

エクスポート側

インポート側

エラー

以下のように、defaultエクスポートを宣言することも可能です。

asを使用

asを使用して別名でエクスポートしてインポートすることも可能です。

インポート側

逆にインポート側で、asを使用することも可能です。

インポート側

全てのモジュールを、asで別名を指定して、以下の用に利用することも可能です。

asにより、複数のモジュールをインポートした際に、同名のモジュール名が存在した場合のエラーを回避することが可能です。