JavaScriptのオブジェクトをimportして表示する

アプリケーションで生成された画像を、別ページでギャラリーのように表示するシステムの組み込みをした。
以前REST APIで生成されるJSONを取得するコードを書いたのでたかをくくっていたが、いざ組み込もうとしたらES6で表記されていて困ったのでメモ。
REST APIでWordpressの更新情報を別ドメインから取得する(JSONPを使用) - ナム山

取り込みたいjsファイルはこんな感じ

const target = [
  { url:'/app/#test?01', img: 'https://dammy.jp/img/img_01.jpg' },
  { url:'/app/#test?02', img: 'https://dammy.jp/img/img_02.jpg' },
  { url:'/app/#test?03', img: 'https://dammy.jp/img/img_03.jpg' },
  { url:'/app/#test?04', img: 'https://dammy.jp/img/img_04.jpg' },
  { url:'/app/#test?05', img: 'https://dammy.jp/img/img_05.jpg' },
  { url:'/app/#test?06', img: 'https://dammy.jp/img/img_06.jpg' },
  { url:'/app/#test?07', img: 'https://dammy.jp/img/img_07.jpg' },
  { url:'/app/#test?08', img: 'https://dammy.jp/img/img_08.jpg' },
  { url:'/app/#test?09', img: 'https://dammy.jp/img/img_09.jpg' },
  { url:'/app/#test?10', img: 'https://dammy.jp/img/img_10.jpg' }
]
export default target

内容は適当だけど、これを取り込み、クエリを持ったURLとパターン違いの画像をリストで表示する。
遷移先でクエリの通り処理して表示、といった案件。

JSONではないので以前のコードは使えないし、そもそもES6なのでconsoleで試しに吐き出してみることさえできない。
exportとimportのリファレンスを調べて出来上がったのがこちら。

import defaultExport from './test.js';//パスとファイル名で上記jsファイルを指定 

var html = '';
for(var i = 0;i<defaultExport.length;i++){
  var url = defaultExport[i].url;
  var img = defaultExport[i].img;
  html += `<li><a href="${link}"><img src="${img}"></a></li>`;
}
$('#dest').append(html);

export

読んで字のごとくデータを出力するもの。

名前付きエクスポート (モジュール当たり0個以上のエクスポート)
デフォルトエクスポート (モジュール当たり1個のエクスポート)
混合エクスポート

の3種類ある。

はじめ、defaultの後に識別名が付いていたので名前付きエクスポートだと早合点してしまい「そんなものない」と怒られてしまう。

参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

import

ここを参考にtype="module"付きで取り込む。
デフォルトエクスポートかなと思い直し
>>import defaultExport from "module-name";<<
で取り込むと無事成功した。

参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

ここを読むとpromiseで処理しても親切だったかもしれない。
今回重い腰を上げてようやくES6に触り始めた。
いい機会なので環境も含めてもっと取り入れようかなと思った。