時系列図を作るライブラリを作ってみた
1556 ワード
作ったもの
下記のような簡単な時系列図？タイムライン？を作るための、svelteのコンポネントライブラリを作ってみました。
- デモ: https://svelte-vertical-timeline.vercel.app/
- リポジトリ: https://github.com/K-Sato1995/svelte-vertical-timeline
Svelteでのコンポネントライブラリの作り方
概要
svelteのwebアプリを作成するためのフレームワークにsvelte-kitがあります。
このsvelte-kitを使用することで簡単にsvelteコンポーネントを使用したライブラリを作成し、npmに公開することが可能です。
具体的な方法
svelte-kitでwebアプリを作成する際とライブラリを作成する場合の違いはpublic(ユーザーが使用するもの)なものの位置だけです。
- src/routes: Webアプリを作成する場合はこちらの配下に作成します(NextのようにURLが動的に作成されます)
- src/lib: ライブラリを作成する場合はこちらの配下にライブラリの内容を作成していきます。
実際にnpmに公開する際は下記のフローで行うことが可能です。
$ npm run package // src/lib配下をビルドする
$ cd package // ビルドで作成されたpackageディレクトリに移動する
$ npm publish // ライブラリをnpmに公開する
より詳細な情報は公式の下記に記載されています。
Author And Source
この問題について(時系列図を作るライブラリを作ってみた), 我々は、より多くの情報をここで見つけました https://zenn.dev/k_sato/articles/2b143b5687d4fb著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol