📌

mirador-sync-windowsのM3版を作成しました。

2024/06/21に公開

概要

以下の記事で、mirador-sync-windowsというMirador 2向けのプラグインを紹介しました。

https://zenn.dev/nakamura196/articles/a45efda5022087

今回は上記の機能をMirador 3(実際には、Mirador 4)向けに改修しました。

まだ挙動が不安定なところがありますが、以下からお試しいただけます。

https://mirador-sync-windows.vercel.app/

Vercelへのデプロイ

以下のmirador-image-toolsプラグインのmirador4向けのブランチをベースに開発を行いました。

https://github.com/ProjectMirador/mirador-image-tools/tree/mirador4-compat-clean

上記では、以下のようなコマンドが用意されています。

{
...
"scripts": {
    "build": "npm run build:umd",
    "build:demo": "NODE_ENV=development webpack --mode=development",
    "build:umd": "NODE_ENV=production webpack --mode=production",
    "build:es": "mkdir -p es && cp -r src/* es && NODE_ENV=production MODULE_FORMAT=es npx babel es -d es",
    "build:cjs": "mkdir -p lib && cp -r src/* lib && NODE_ENV=production MODULE_FORMAT=cjs npx babel lib -d lib",
    "clean": "rm -rf ./umd && rm -rf ./es && rm -rf ./lib && rm -rf ./demo/dist",
    "lint": "eslint ./src ./__tests__",
    "prepublishOnly": "npm run clean && npm run build:es && npm run build:cjs && npm run build",
    "start": "NODE_ENV=development webpack serve --open",
    "test": "npm run lint && jest",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch"
  },
...
}

上記のコマンドを踏まえて、vercelのデプロイ設定を以下のように修正しました。

Build Commandにpnpm build:demo、Ouput Directoryにdemo/distを与えました。

まとめ

いずれソースコードの公開なども行いたいと思います。Mirador3(4)のプラグイン開発にあたり、参考になりましたら幸いです。

Discussion