モジュールを学ぶ importとfrom、export、別名

ハンズオンJavaScript
楽天ブックス
Yahoo!
au PAY マーケット

開発環境

ハンズオンJavaScript (あんどうやすし(著)、オライリー・ジャパン)の5章(モジュールを学ぶ)、5.7(練習問題)の5-1の解答を求めてみる。

コード

main.html

<div id="output"></div>
<script type="module" src="main.js"></script>

main.js

import { K as Klass } from "./module.js";

let div = document.querySelector('#output'),
    k = new Klass(),
    err;

try {
    k = new K();
    console.log('try');
} catch (e) {
    err = e;
}

div.innerHTML = `${Klass}<br>${k}<br>${err}`;

入出力結果(Terminal, Zsh)

% http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.10.112:8080
  http://192.168.10.109:8080
Hit CTRL-C to stop the server
...
^Chttp-server stopped.
%

出力結果(Webブラウザー(Safari))

<html>

<head></head>

<body>
    <div id="output">class Klass { }<br>[object Object]<br>ReferenceError: Can't find variable: K</div>
    <script type="module" src="main.js"></script>
    <div id="pocket-extension-root">
        <div class="pocket-egasyq"></div>
    </div>
    <div id="pocket-extension-styles">
        <style data-emotion="pocket"></style>
    </div>
</body>

</html>