とんちむ日記

RubyとJavaScriptと猫が好きです

Google Chromeがimportに対応した

対応するって話は知ってはいましたがとうとう対応したんですね。ちょっと興奮して久しぶりにブログを更新してます。

ES2017も正式勧告されたこのご時世にimportを知らないwebエンジニアは少数だと思いますが、使い方はこちら

Safariも最新版はiOSを含めて対応してると小耳に挟んだので他のブラウザ実装状況はどうだろうかとcan i useで調べて見ました。

今のところこんな感じみたいでEdgeやFirefoxもデフォルトでは対応していないもののNot supported by default, but can be enabled. とあるので設定変更するとかで有効にできるようです。

というわけでやってみた。

// hello.js
const Hello = "hello"
export default Hello
// sample.js
import Hello from './hello.js'
console.log(Hello)
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="module" src="./sample.js"></script>
</body>
</html>

chromeはローカルのファイルだと制限があるのでpythonのサーバーを立ち上げます。

$ python3 -m http.server

http://localhost:8000/index.htmlchromeで開くと・・ コンソールにhelloと表示されました。やったね!

ちなみにnode_modulesには対応してないのでそういうの使いたければ適当な場所に置いといて読み込むとか、これまで通りWebpackなどのモジュールバンドラーを使う必要があるそうです。

とは言ってもグローバル汚染しなくてもライブラリを扱えるのは素晴らしいです。

他のブラウザも早く対応して欲しいですね。