ESModules

JavaScriptから別のJavaScriptを読み込む仕組み

export fooで外に出して

import {foo} from '../path/to/file'で読み込む

CommonJSとは異なり、JavaScriptに専用の文法を導入した

__filenameも無くす動きがある

Chrome 61から使えるようになったshokai.icon*5

code:js

import {foo} from '../path/to/script.js'

</script>

type="module"付ければいいだけ

認証が必要な場合はcrossorigin="use-credentials"を付ける

これが普及するとbrowserifyとかwebpackとか（少し）いらなくなるかもしれない

CosenseのUserScriptでも、import文が使えると便利だと思うshokai.icon

やってみた。こうなった→ shokai#58dce5ef97c2910000bc9686

自分のページが長いScriptで埋まらない

長いscriptもガンガン書ける

管理や配布が楽になった

このprojectに置いてあるページの1部分を別のページに切り出すUserScriptを、別のprivate projectからも読み込める

type="module"未対応ブラウザへの対応

ブラウザは、不明なtypeが指定されたscriptタグを解釈しない

これだけだとChrome v60以前やFirefoxなどではscriptタグが動かない

ESModulesではなく普通のJavaScriptとしてロードしてはくれない

解決方法

nomodule属性を付けたscriptタグを併記する

今度は逆にESmodules対応ブラウザがそのscriptタグを解釈しないようになってくれる

ScrapboxのUserScriptみたいユーザーにJavaScriptを書かせて、中身を問わずとにかくロードしたい場合は

nomodule付けたscriptタグを併記しておけば、どっちかが読み込まれる

code:html