ES modulesを触ってみる

背景

• 最近フロントエンドに再入門しました。
• commonjsとかそこらへんも全然わかってはいません。
• JavaScript(ES6)の勉強を学習サイトの入門コースでやってみたのですが、import/exportに触れていなかったので軽くやってみました。

この記事でやること

• 制限事項
• import/exportの基本的な書き方(モジュールバンドラーなし)

実行環境

• Thimble by Mozilla
• ローカルでは動かないようなので、オンラインコードエディターを使用
  • ブラウザでjsを読み込もうとすると、CORSエラーとなる
  • node.jsもサポート制限があり、そのままでは動かないので、今回は見送り
  • "http-server"ではimportしたモジュールの読み込みに失敗する
  • https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs

制限事項

• "strict"モードになる
• htmlに読み込む際はscriptタグにtype="module"の属性を追加

export

• 名前付き(named)、もしくは、defaultで定義できる
• class

export class Human {...}
export default class Human {...}

• function

export function func1(){...}
function func2() {...}
export {func2}
export default function () {...}
export default function func3() {...}

• var, const, let

export let val1 = 1
let val2
export default val2 = 2

• 1ファイルに複数のexportがかける
• export defaultはモジュールに1つ

import

• defaultでexportしたものはimport先で任意の名称をつける
  • 複数読み込む場合は、defaultを先にインポートする
• ワイルドカード(モジュール全てを読み込む)
• asは名前空間やリネームに使用できる

import defaultModule, { namedModule, namedModule as rename} from './something.js'
import * as module1 from './something.js'

動かしたコード

• Thimble by Mozilla上で確認

ES module 基礎

出典

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

補足

• 現在のブラウザではまだ十分に動かないので、webpack等を使う必要があります。