svelte component template

Svelte 3組件模板

一個高度開放的基礎，用於建築可共享的Svelte 3組件

目錄

1. 特徵
2. 入門
3. 發展
4. 預處理器
5. 測試
6. 發布給NPM
7. 常見問題

特徵

• 預處理
• 格式
• 覆蓋
• 故事書
• 測試

入門

1. 克隆模板：

選項＃1：用GitHub的“使用此模板”選項克隆它：

選項＃2：用DEGIT克隆此存儲庫：

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. 從$ lib $中導入src/routes/index.svelte中的組件，因此您可以預覽和測試。

5. 導航到Localhost：3000，可以直播您的組件。

預處理器

所有預處理都用鮮豔的預處理處理。在svelte.config.js中配置它。

測試

交互測試

這是一種簡單而直觀的方法，可以在柏樹的幫助下通過Storybook完成。可以在此存儲庫中找到示例和預製測試腳本，並且可以在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 Party CSS？

有一些選擇要這樣做：

1. 不要包含3'rd Party CSS，而只需告訴您的用戶執行此操作（可能使用PostCSS）。
2. 通過cdn包括它：這樣：

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

發布給NPM

1. 準備出版包：

npm run package

2. 發布包：

 cd package
npm run publish

• 創建和發布範圍的公共套餐
• 創建和發布未指示的公共套餐