今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。
対象読者
テーマ拡張機能の開発経験がある方
はじめに
Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。
Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。
そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。
Shopify Vite Plugin とは
Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。
主な機能は、ViteでビルドしたスクリプトなどをLiquidから簡単に利用することができます。また、ホットリロードにも対応することができます。(単純にViteを組み込むだけだとスクリプトのホットリロードが難しい)
Shopify テーマ拡張機能向けのサンプルプロジェクト集も用意されています。
以降は、公式が用意しているサンプルプロジェクトを元に導入をしていきます。
Shopify Vite Plugin のインストール
環境
- node: v18.12.0
- npm: v8.19.2 (pnpmでもyarnでも大丈夫です)
テーマ拡張機能のディレクトリがある前提で進めますので、ない方はShopifyの公式ドキュメントを参考に作成してください。
素のテーマ拡張機能のディレクトリ (例: extensions/theme-extension) に各種パッケージを導入していくため、まずは npm init を実行します。
続いて必要なパッケージをインストールします。
npm i -D vite vite vite-plugin-page-reload vite-plugin-shopifyvite.config.js の設定
テーマ拡張機能のディレクトリに vite.config.js ファイルを作成します。
import { defineConfig } from 'vite'
import pageReload from 'vite-plugin-page-reload'
import shopify from 'vite-plugin-shopify'
export default defineConfig({
plugins: [
shopify(),
pageReload('/tmp/extension.update', {
delay: 1800,
}),
],
}).shopifyignore の設定
テーマ拡張機能のディレクトリに .shopifyignore ファイルを作成します。
テーマ拡張機能のデプロイ (shopify app deploy) 時に、テーマ拡張機能と関係のないディレクトリやファイル類があるとエラーが発生するため、以下のディレクトリやファイルを無視するように指定してします。
assets/*.json
frontend/
node_modules/
package.json
vite.config.js実際に使ってみる
エントリーポイントの作成
- テーマ拡張機能のディレクトリに frontend/entrypoints ディレクトリを作成します
- 上記のディレクトリ内に entry.js ファイルを作成します
- entry.js ファイルに Hello World を表示するコードを記載します
function listener() {
const helloWorld = document.createElement('p')
helloWorld.textContent = 'Hello World'
document.body.insertBefore(helloWorld, document.body.firstChild)
}
const options = { passive: true, once: true }
document.addEventListener('DOMContentLoaded', listener, options)エントリーポイントを呼び出す
素のテーマ拡張機能のディレクトリに元からある blocks/star_rating.liquid の最上部に下記を追記します。
{% liquid
render 'vite-tag' with 'entry.js'
-%}テーマ拡張機能をプレビューする
テーマ拡張機能のディレクトリで vite を実行し、いつものようにテーマ拡張機能のプレビューを実行します。
ページ上部に Hello World が表示されることを確認できたら、entry.js のコードを変更してみましょう。ホットリロードで変更が反映されることを確認できたらOKです！
まとめ
Shopify Vite Plugin の導入方法を必要最小限でご紹介しましたがいかがでしたか？
公式のサンプルプロジェクトではPreactを使っているように、中規模から大規模なテーマ拡張機能を開発するときにとても役立つと思います。
弊社のアプリにも積極的に採用していきたいと思いました。
