修正ついでにNPMに公開してみたかったのでやってみた。
利用方法
Vue等を使用しない場合は以下で良い。classを使用するだけで動作する。
https://github.com/yubinbango/yubinbango
上記は便利だがVue等のフレームワークと相性が悪い。
VueでTypeScriptを利用したい場合は以下
https://www.npmjs.com/package/yubinbango-core-strict
npm install yubinbango-core-strict
import { YubinBangoCore } from 'yubinbango-core-strict';
const postalcd = "1010001"
new YubinBangoCore(postalcd, function (addr) {
// region_id=県コード, region=都道府県
// locality=市区町村, street=町域
console.log(addr)
})
Visual Studio Code等を使っている場合addrにインテリセンスが効くようにしてある(型情報を定義している)。
経緯とかやったことメモとか
https://www.npmjs.com/package/yubinbango-core こちらは本家で公開されているものだがモジュールがエクスポートされておらず利用できない。
これを解消したものとしてYubinbango-core2というパッケージがある。
https://www.npmjs.com/package/yubinbango-core2
core2はトランスパイルするだけなら問題ないがstrictモードやESNEXTでビルドするとエラーになる。このライブラリのためだけのためにいろいろ設定を変更するわけにはいかない。
本当は本家で修正してもらうのが良いと思うがずっと放置されているようだ。
https://github.com/yubinbango/yubinbango-core/issues
短いソースだから自分で用意してしまえば＆ついでに公開してしまえば便利では！？というのが経緯。
具体的には以下のような対応をおこなった。
Export assignment cannot be used when targeting ECMAScript modules. Consider using 'export default' or another module format instead
exportの記述が少し古いものになっているので修正。https://qiita.com/ystkr/items/84deec9a9fe8a85a96d1
非推奨になった記述を修正。substrなど。
型を全て明示するように変更。
元々あったgulpのテストもやりたかったが少し手直しした程度では実行できなかった...... やるなら0からやり直す必要があるがそこまでやるメリットを感じない。
NPMへ公開する
https://www.npmjs.com/ にてサインアップ。
パスワードは後で入力することになるので自動生成しないほうがいいかも。
package.jsonとREADME.mdを公開用に修正する。NPMの該当ページに表示される情報になる。
npm adduser
npm publish ./
これだけでnpm installできるようになるうえに普通にNPMで検索した時に出てくる。いいのか？100行にも満たない短いライブラリだが時間が経つと動かなくなるのはなかなか辛いものがある。
参考
https://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2
