Skip to main content

package.json の imports / exports フィールドというものを知った

· 5 min read

作業記録ログ

友達がビルド時の不具合を発見してくれたのでyarnをやめてnpmでセットアップ+ビルドを行うように修正。 したらCIも通るようになった。今後はyarnは使わないで開発を行うようにしようと思う。

npmにもworkspaceの機能があったのではじめからそれを使えばよかった....


次はこれ https://github.com/pdfme/pdfme/issues/11

バーコード生成時のバグ。labelmakeにも同じバグが発生している状態。 再現確認はできた。バージョンを変えたりして実行したがうまく行かない。 ビルドの問題かもしれない。

エラーメッセージで検索すると同じようなissueが発見できる https://github.com/metafloor/bwip-js/search?q=toBuffer+is+not+a+function&type=issues

nodeとブラウザの実行で呼び出せるメソッドが変わるらしいが、ビルド時にtoBufferがなくなってしまっている可能性がある。

labelmakeのはビルドの設定は変えてないのでバージョンの問題かもないが一旦pdfmeの修正から行う予定。

/node_modules/bwip-js/package.json にあるexportsフィールド。これを直接nodeとブラウザで分けて呼び出せばいいのでは? https://github.com/metafloor/bwip-js/issues/157#issuecomment-829564284 ↑うまく呼び出せないexports フィールドについて理解する必要がある

package.json の imports / exports フィールド <- の記事が分かりやすくまとめられていた importで呼び出しを変えたりなども試して動かす

解決した。

bwip-jsはnodeとブラウザーの実行でバーコードを生成するメソッド(toCanvasとtoBuffer)が変わる。bwip-jsのpackage.jsonで条件に応じて切り替えられている。 これはbwip-jsが3系からpackage.jsonのexportフィールドのConditional Exports による条件に応じたロードを指定していたためそのような動きになっている。 さらに、webpackでビルドした場合は常に"browser" に定義されたファイルがバンドルされていたためだ、常にtoCanvasしかロードされていなかった。 Nodeでもブラウザでも動く可能性があるのでどちらもインポートしなければならない。 bwip-jsを2系に落とし、下記のようにそれぞれをインポートするようにしてコード側でどちらを使うかを切り分けるようにすれば動いた。

import bwipjsNode from 'bwip-js/dist/node-bwipjs';
import bwipjsBrowser from 'bwip-js/dist/bwip-js';

残念なことにバンドルサイズが大きくなってしまった。 そういえば、imports によるモジュール名とファイルのマッピングでも解決できるかもしれない。 package.jsonでimportsの指定をしてそれで動くか試してみる。このようにすればbwip-js3系でも動作させることができるかもしれない。

本日の作業

明日の作業


日記

今日は朝にボビーワゴンが届き、かなり状態がいいものだったのでよかった。 その後妻は英会話して散歩。そのあと掃除。掃除中には結構娘が泣いていた。まあさみしかったっぽい。

それからスタバで作業だったけど、座れなかったのでドトールで。

package.json の imports / exports フィールド知らなかったので知れてよかった。

macbook proとairpods proの組み合わせでオーディオのバランスが崩れる問題があったがBalance Lockで治った https://applech2.com/archives/20210516-balance-lock-for-mac-support-apple-silicon.html