esbuild loaderのoptions他

2025年9月1日

esbuildの覚書です。

エックスサーバーのお友達紹介プログラム!

Contents

1 esbuildでCSSのPNGパスエラー
2 esbuildのWindows・MACのクロスプラットフォームエラー
3 esbuild loaderのoptions

esbuildでCSSのPNGパスエラー

JSと一緒にCSSも圧縮しようと思ったのですが、CSS内にPNGパスがあるとエラーで通りませんでした。

loaderを設定すると、通るのですけど、出力先に画像がコピーされてしまいます。やりたいこととちょっと違います。

loader: {
  '.png': 'file',
},

無視してくれればいいのです。ignore: [‘.png’],みたいなのがいないかと思ったらありました。externalだったため気付きにくかったです。

external: ['*.png'],

参考！

The solution to this is to pass *.png as external as indicated:
https://github.com/evanw/esbuild/issues/800

You can mark a file or a package as external to exclude it from your build.
https://esbuild.github.io/api/#external

取り去るというのはCSS内ではなく、画像を生成でず取り去るみたいなニュアンスでしょう。圧縮されたCSSはpngは残っていたので。

you can use *.png to remove all .png
https://esbuild.github.io/api/#external

こちらはGPT４君では解決できず、自力解決。少し難しいものはやっぱこうなりがちですね。ぐぐりましょう！

esbuildのWindows・MACのクロスプラットフォームエラー

Windowsで使っていたVsCodeのプロジェクトをMacに共有した場合に問題が起きました。

Error: 
You installed esbuild for another platform than the one you're currently using.
This won't work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the "@esbuild/win32-x64" package is present but this platform
needs the "@esbuild/darwin-arm64" package instead.

解決策は公式サイトに提示されていました。

Simultaneous platforms

You cannot install esbuild on one OS, copy the node_modules directory to another OS without reinstalling, and then run esbuild on that other OS. This won’t work because esbuild is written with native code and needs to install a platform-specific binary executable. Normally this isn’t an issue because you typically check your package.json file into version control, not your node_modules directory, and then everyone runs npm install on their local machine after cloning the repository.

However, people sometimes get into this situation by installing esbuild on Windows or macOS and copying their node_modules directory into a Docker image that runs Linux, or by copying their node_modules directory between Windows and WSL environments. The way to get this to work depends on your package manager:

npm/pnpm: If you are installing with npm or pnpm, you can try not copying the node_modules directory when you copy the files over, and running npm ci or npm install on the destination platform after the copy. Or you could consider using Yarn instead which has built-in support for installing a package on multiple platforms simultaneously.

Yarn: If you are installing with Yarn, you can try listing both this platform and the other platform in your .yarnrc.yml file using the supportedArchitectures feature. Keep in mind that this means multiple copies of esbuild will be present on the file system.

You can also get into this situation on a macOS computer with an ARM processor if you install esbuild using the ARM version of npm but then try to run esbuild with the x86-64 version of node running inside of Rosetta. In that case, an easy fix is to run your code using the ARM version of node instead, which can be downloaded here: https://nodejs.org/en/download/.

Another alternative is to use the esbuild-wasm package instead, which works the same way on all platforms. But it comes with a heavy performance cost and can sometimes be 10x slower than the esbuild package, so you may also not want to do that.
https://esbuild.github.io/getting-started/#bundling-for-node

MacとWindowsをDropboxで同期したため、発生した問題でした。

node_modulesを各々わける必要があります。

Windowsでプロジェクトを使う可能性が低かったため、node_modules_winというフォルダ名を変更してバックアップを取り、Mac環境でnode_modulesを再インストールするというシンプルな解決策で問題解決しました。

npm install