svelte component template

Svelte 3コンポーネントテンプレート

共有可能なSvelte 3コンポーネントを構築するための高度に感染したベース

目次

1. 特徴
2. はじめる
3. 現像
4. プリプロセッサ
5. テスト
6. NPMへの公開
7. よくある質問

特徴

• 前処理
• フォーミング
• 糸くず
• ストーリーブック
• テスト

はじめる

1. テンプレートをクローンします：

オプション＃1：GitHubの「このテンプレートを使用する」オプションでクローンを作成します。

オプション＃2：このリポジトリを学位でクローンします：

npx degit YogliB/svelte-component-template ` my-new-component `

2. フォルダーを入力します：

 cd my-new-component

2. Gitを開始する：

git init

3. 依存関係をインストールします：

npm install

3. package.jsonを構成：

npm init

4. コーディングを開始：

code .

• コンポーネントのソースコードはsrc/lib/[MyComponent]/[MyComponent].svelteに存在します。

現像

1. Sveltekitを開始：

npm run dev

2. src/libでコンポーネントファイルを編集し、保存して魔法が起こるのを見ます。

3. src/lib/index.jsでコンポーネントをエクスポートします。

4. コンポーネントをsrc/routes/index.svelteで `$ lib $からインポートするため、プレビューしてテストできます。

5. LocalHost：3000に移動して、コンポーネントをライブで確認します。

プリプロセッサ

すべての前処理は、Svelte-Preprocessで処理されます。 svelte.config.jsで構成します。

テスト

相互作用テスト

これは、サイプレスの助けを借りて、ストーリーブックを通して行うことができるシンプルで直感的な方法です。このリポジトリには例と事前に作成されたテストスクリプトがあり、StoryBookのドキュメントには詳細が記載されています。

スナップショットテスト

このレポでは、クロマティックにスナップショットテストを使用する基本的なワークフローがあります。

よくある質問

index.jsファイルは何ですか？

Svelteが単一のソースから複数のコンポーネントをインポートできることです。

たとえば、ユーザーは次のことを行わせます。

 import { MyComponent , MyOtherComponent } from 'my-component-library' ;

の代わりに：

 import MyComponent from 'my-component-library/components/MyComponent.svelte' ;
import MyOtherComponent from 'my-component-library/components/MyOtherComponent' ;

コンポーネントに3'RDパーティーCSSを含めるにはどうすればよいですか？

これを行うにはいくつかのオプションがあります：

1. 3'RDパーティCSSを含めないで、ユーザーにそれを行うように指示しないでください（おそらくPostCSを使用してください）。
2. そうするように、CDNを介してそれを含める：

 @import url ( 'https://unpkg.com/@scope/package/main.min.css' );

NPMへの公開

1. 公開用のパッケージを準備してください：

npm run package

2. パッケージを公開：

 cd package
npm run publish

• スコープされたパブリックパッケージの作成と公開
• 非座りのない公開パッケージの作成と公開