ESModules について

予習のために調べたことをまとめました。
勘違いや誤りがあるかもしれませんので、修正・指摘歓迎いたします

ESModules とは

• JavaScript から別の JavaScript を読み込む為の仕組み
• いままで CommonJS で実現していたことをJSの標準仕様にしたという理解
• 仕様を決めるのに苦労した様子
  • ESModules と CommonJS の相互運用問題
  • ESModules の判定方法をどうするか問題
• まだ production 環境などに採用するのは時期尚早かも？

対応状況

• Node.js は v8.5 から実験的に対応されている
  • --experimental-modules フラグを付与する
• 主要ブラウザは概ね対応済み
  • https://caniuse.com/#feat=es6-module

利用例

Browser

<script type="module" src="index.mjs">

• type="module" を指定する
• 認証も必要なら crossorigin="use-credentials" を付与

Node

node --experimental-modules index.mjs

• 拡張子を .mjs にする
• --experimental-modules フラグを付与する

実装例

import hello from './hello'

export default () => {
  hello('world')
}

• ファイルの拡張子は .mjs
• import の際に .mjs は省略して良い (.mjs -> .js の順で探索される為)
• 既に ES2015 (with Babel) で実装しているなら慣れ親しんでいるかも

require はできない

const hoge = require('./hoge')

• CommonJSとは記法が異なる

named import はできない

import { piyo } from './hoge'

• Babel だとトランスパイルできてしまうので注意

import hoge from './hoge'
const { piyo } = hoge

• これなら書ける

使えなくなるグローバル変数がある

• __filename
• __dirname
• require
• module
• exports
• arguments

Tips

__dirname を代替する

const __dirname = path.dirname(new URL(import.meta.url).pathname)

• import.meta というAPIが提案されている
  • ファイルのURLが取得できるようになる
  • https://github.com/tc39/proposal-import-meta

エディタで import.meta が syntax error になる場合

• まだ仕様策定中だから未対応の可能性がある
• IntelliJ が Early Access Program で対応してる
  • https://www.jetbrains.com/webstorm/eap/

何が嬉しいのか

• webpack などでバンドルしなくていい(遠い将来に)
• babel などでトランスパイルしなくていい(遠い将来に)
• HTTP/2 で各モジュールを並列配信できれば速くできるかも？

参考

• http://blog.hiroppy.me/entry/nodejs-esm
• https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs
• https://yosuke-furukawa.hatenablog.com/entry/2016/05/10/111102