Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue CLI - Library Build

Vue CLI - Library Build

8c63f8d04b540c8c9e2fad8ec449b552?s=128

Shindeok Kang

December 11, 2019
Tweet

Transcript

  1. Vue CLI 〜 Library Build でハマった話 〜

  2. https://twitter.com/KangShindeok https://github.com/heavymery ラクスル株式会社 姜 信徳 / Shindeok Kang 自己紹介 フロントエンド開発

    エンジニアリング・マネージャー
  3. Index • ラクスルのサービスと技術スタック • npm package 化したい背景 • そこでハマった!

  4. ラクスルのサービスと技術スタック TVCM

  5. ラクスルのサービスと技術スタック Server Side Frontend

  6. npm package 化したい背景 Super Cool Web App Super Cool SPA

    Super Cool Web App Super Cool SPA Super Cool Web App Super Cool SPA ... Same Codes ... Same ? Code ...
  7. npm package 化したい背景 • Common UI Components • Common Store

    modules • Utilities ... Super Cool Package Super Cool Web App Super Cool SPA
  8. そこで • ググったら公式サイトのページ Cookbook が出てきた https://vuejs.org/v2/cookbook/index.html • Cookbook の rollup

    設定が良く分からなかった https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html • Vue CLI の Library Build 機能があるっぽい! https://cli.vuejs.org/guide/build-targets.html#library
  9. だけど • Vue CLI ドキュメントの設定方法が良く分からない • ググってみると Component の簡単な例は見つかった •

    Store モジュールとかも package 化したいし • TypeScript で書きたいし • ...
  10. そこでハマった!

  11. DEMO my-lib と my-app でハマるデモ

  12. THANK YOU 良い方法あったら教えてください

  13. THANK YOU 良い方法見つかったらブログ書きます ✌ https://tech.raksul.com/