概要
esbuild を使います
環境
- macOS 15.7.2
- Ruby 4.0.0
- nodejs 22.21.0
- esbuild 0.27.2
erb の script タグ
これを nodejs で管理します
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js" integrity="sha512-vONptKEoKbP1gaC5UkbYDa9OPr04ur4bxaaqT7DAJxGHB2oogtseCPrl5e5hPFokGYotlGNV4d+GM593ka7iNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
esbuild のインストール
-
npm install --save-dev esbuild
plyr のインストール
- npm install plyr
src/podcast.js の作成
esbuild が自動で作成する plyr の JavaScript ファイルを作成するための設定的なものを書きます
また plyr に関する処理も書きます
このファイルを元に自動で配信用の JavaScript ファイルを esbuild が作成してくれます
import Plyr from "plyr";
document.addEventListener("DOMContentLoaded", () => {
const player = new Plyr("#player", {
speed: { selected: 1, options: [1, 1.5, 2] },
});
});
package.json に追記
scripts に追記します
esbuild を使ってビルドし自動で JavaScript ファイルを作成する処理を記載します
実際にアプリで使用する public/js 配下になります
"scripts": {
"build:podcast": "esbuild src/podcast.js --bundle --minify --outfile=public/js/podcast.js"
}
ビルド
- npm run build:podcast
これで public/js/podcast.js ができます
冒頭の erb はこのファイルだけを参照すれば OK です
erb コード内で直接参照していた script タグは削除して OK です
おまけ: .gitignore
自動生成される public/js/podcast.js は .gitignore に入れたほうがいいです
理由は git grep などで検索するときに大変になるからです
なので Dockerfile などでビルドする設定を入れるようにしましょう
###############################
# Stage 1: JS/CSS Build
###############################
FROM node:22.21-slim AS build
WORKDIR /app
# package.json だけコピーして npm install を早くする
COPY package.json package-lock.json ./
RUN npm install
# ソースコードコピー
COPY src ./src
COPY public ./public
# CSS minify tool
RUN npm install -g clean-css-cli
# CSS minify
RUN find public/css -name "*.css" -exec sh -c 'cleancss -o "$1" "$1"' _ {} \;
# JS build
RUN npm run build:podcast
ただビルドする環境がなくリポジトリの内容をそのままデプロイするような環境では .gitignore せずに git 管理に含めるようにしましょう
最後に
今後は npm update すれば自動で更新してくれます
esbuild はミニファイもしてくれるのでそのまま配信用として使えます
0 件のコメント:
コメントを投稿