Chapter 15

JS資産との連携

NoboNobo
NoboNobo
2020.11.12に更新

https://esbuild.github.io の利用をお勧めします。

公開されているJSのモジュールは以下のように分断状況にあります。

  • iife
  • cjs(nodejs)
  • esm

これらを統一した形式に変換またはバンドルして読み込む形にするのがお勧めです。

JS資産の公開形式によって以下の2通りの方法を紹介します。

  • npm or yarn installした資産を使いたい
  • CDNからesm形式で公開された資産を使いたい

esbuild インストール

go get github.com/evanw/esbuild

npm or yarn installした資産を使いたい

index.js

import * from "@tensorflow-models/posenet";
window.posenet = {
	load: load,
}

必要な要素をwindowオブジェクトにぶら下げます。
それをGo実装側から利用するという形です。

esbuild index.js --bundle --platform=node --outfile=posenet.js

posenet.jsspago.LoadScriptにて読み込みます。

CDNからesm形式で公開された資産を使いたい

index.js

import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.module.js";
window.THREE = THREE;

必要な要素をwindowオブジェクトにぶら下げます。
それをGo実装側から利用するという形です。

esbuild index.js --bundle --outfile=three.js

three.jsspago.LoadScriptにて読み込みます。

esm形式で出力して利用したい

index.js

export * from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.module.js";
...
追加の定義記述
...

それをGo実装側から利用するという形です。

esbuild index.js --bundle --format=esm --outfile=three.js

three.jsspago.LoadModuleAsにて読み込みます。

esm.shの利用

https://esm.sh/

npmモジュールをesm形式に置き換えたCDNのURLを提供するサービス。

一部を除けばURLを開くときにCDNまだ存在しないモジュールであっても瞬時にビルドしてCDNに乗せてアクセス可能なesmを応答するようになります。

ここを経由する場合、以下のようにインポートできます。

import * as THREE from "https://esm.sh/three@0.122.0"

ちなみにこのバックエンドはesbuildが使われています。