ブラウザの ESモジュール を試す

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー JavaScirpt

とあるモジュールを試験するために、サクッとブラウザの ESモジュール を検証してみることにしました。

コード

somemodule.js (somemodule.min.js)

export class SomeModule {
    constructor() {
        // some init
    }
    procedure() {
        // some processing
    }
    // 略
}

app.js (app.min.js)

import { SomeModule } from './somemodule.min.js';

const some_module = new SomeModule();
some_module.procedure();

html

<script type="module" src="./js/somemodule.min.js" defer></script>
<script src="./js/lib.min.js" defer></script><!-- jQuery など -->
<script type="module" src="./js/app.min.js" defer></script>

これで動作するようになったことを確認。

メモ

  • エクスポート元のJS: exports.default や module.exports はNG。 export XXX の形式
  • インポート先のJS:
    • JSファイルの指定は普通にパス・ファイル名指定
    • 名前つきインポート
  • HTML: scriptタグはエクスポート元もインポート先も type="module" が必要

肝は特に最初と最後ですかね。念のため JS 周りの環境ですが、 Gulp + gulp-uglify-es 使用、モジュールバンドラ未使用環境でした。

参考

ES Modules

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧