Vue CLI - Library Build

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/