JavaScriptでimport元にData URLを記述

以下のような感じです。

<script type=module>
import a from'data:text/javascript,export default()=>console.log("一丁")';
import b from'data:text/javascript,export default()=>console.log("\u4e00\u4e01")';
import c from'data:text/javascript,export default()=>console.log("%E4%B8%80%E4%B8%81")';
a();b();c()
</script>

いずれも文字化けはせず、意図した通り動作します。charset=...などという追記は不要とだけは過言しておきます。

注意点と制限事項

非常に便利で役に立たない機能ですが、ふざけて使う際にはいくつか注意点があります。

• MIME型の指定:
  Data URLの冒頭のMIME型は、必ずJavaScriptとして認識されるもの(text/javascript や application/javascript)にする必要があります。text/plain 等にするとErrorになります
• 相対pathの解決:
  Data URLの中にさらに import "./module.js" のような相対pathが書かれていた場合、基準となるURLが存在しないためErrorになります(Data URL内からは絶対URLでしかimportできません)
• 安全性(CORSやCSP):
  Browser環境において、Content Security Policy(CSP)の script-src で data: が許可されていない場合、Security Errorで遮断されます
• 静的解析が困難:
  ESLintなどのLinterや、Webpack、Vite、Rollup等は、Data URLのimportをうまく解析できず、Errorになったりbundle対象から外れたりすることがあります

用途

外部fileを一切作らずに、動的にmoduleを生成して実行したい時(例：Web Workerをinlineで生成する、利用者が入力したcodeをその場でmoduleとして実行する等)に非常に強力な手法です。普段の開発で多用しまくっても構いませんが、現場が大混乱に陥ったからと言って喜んではいけません