Home > 【技術メモ】管理画面でYarn Linkを使ったパッケージの高速開発

【技術メモ】管理画面でYarn Linkを使ったパッケージの高速開発

【技術メモ】管理画面でYarn Linkを使ったパッケージの高速開発

Tue Apr 09 2019

マルレポ開発

Atomsコンポーネントを切り出すことを現在検討中の Nuxt Admin (以下 Nuxt Adminとは、を参照してください) この Nuxt Adminと、切り出した Atomsコンポーネントを集めたパッケージのマルレポ開発を高速で進めるために必要な Yarn Linkを記録します。ちなみに筆者は、 yarnではなく npmを今まで使っていたので、 Yarn Linkは初耳の存在でした。

Nuxt Adminとは

当ブログの問い合わせを管理するため、裏側の管理画面を自作、バックエンドに Firestoreを採用しています。ちなみに管理画面のフロントエンドでも Vue.jsのフレームワークの一つNuxt.jsを採用しています。

https://nuxtadmin.netlify.com/

ただし自分以外触れません。

近く権限を追加した上で、閲覧用アカウントの開設を検討中。主な機能は、

  1. 技術ネタ・勉強会スライド一覧
  2. Qiita一覧(いいね管理をスマートに)
  3. 当ブログ解析結果一覧
  4. 搭乗ログ一覧

リンクするための手順が重要

https://yarnpkg.com/lang/ja/docs/cli/link/

Atomsコンポーネントを切り出したパッケージで予め yarn link コマンドを実行、メインリポジトリで先のパッケージ名を引数にして設定。パッケージでは Storybookを使う想定、 webpack4の progresswatch オプションを使うことで適宜 watch コマンドで動作確認できるようにする。

"script":  {
    "watch": "webpack --progress --config=webpack.config.js --watch",
}
# Link
yarn link

# Link --watch
yarn watch

メインリポジトリからパッケージに繋げる

yarn link <パッケージ名>

コメントを残す