svelte(web開發框架)

Svelte提供了一種不同的方式來建構網站套用方式。當應用程式運行時，像React和Vue.js等框架會在使用者的瀏覽器直接做它們想要做的事情，而Svelte則是將做的這些事移到編譯階段處理，因此那些做的事情只會發生在你建置應用程式的時候，進而能產生高度最佳化的原生JavaScript程式代碼。

基本介紹

• 軟體名稱：svelte
• 軟體平台：Node.js
• 軟體語言：JavaScript
• 所屬學科：計算機科學

運行環境

為了使用Svelte，需要安裝Node.js。Node包含npm（the node package manager）和 npx（the node package runner）。也可以使用Yarn 套件管理工具來代替 npm。

運行方式

Svelte 透過下列方法來擴展其原生網站技術：

HTML 擴展允許標記 JavaScript 表達式和提供一些指令來使用條件和迴圈，做法和 handlebars 相似。

CSS 擴展加上範圍機制，允許每個元件去定義它們自己的樣式，不會因為其它元件的樣式改變而被影響。

JavaScript 擴展重新詮釋語言的一些特定指令來達到真實的反應性和減輕元件狀態管理。

項目結構

moz-todo-svelte

├── README.md

├── package.json

├── package-lock.json

├── rollup.config.js

├── .gitignore

├── node_modules

├── public

│ ├── favicon.png

│ ├── index.html

│ ├── global.css

│ └── build

│ ├── bundle.css

│ ├── bundle.js

│ └── bundle.js.map

├── scripts

│ └── setupTypeScript.js

└── src

├── App.svelte

└── main.js

package.json 和 package-lock.json：Node.js/npm 用它來組織化管理項目。

node_modules：這裡 node存放專案相依套件的地方。

.gitignore：告訴git 有哪些檔案或資料夾不要納入專案版本控制。

rollup.config.js：Svelte使用 rollup.js 做為模組包裝工具。

scripts：包含所需的設定腳本。現在應該只有setupTypeScript.js。

setupTypeScript.js：此腳本用來支援 Svelte 可以使用 TypeScript。

src：這個目錄主要放應用程式的來源程式代碼。

App.svelte：在應用程式中它是最高層級的組件。

main.js：我們套用程式的進入點。它會實例化 App 元件並將其綁定至我們 HTML 頁面的 body 上。

public：這個目錄包含所有我們會釋出於正式環境的檔案。

favicon.png：這個是應用程式的 favicon。現在應該會是 Svelte 的標誌。

index.html：這個是應用程式的主要頁面。最初為一個空的 HTML5 頁面，接著會載入由 Svelte 產生的 CSS 檔案和 js 包裹。

global.css：這個檔案包含沒有範圍限制的樣式。這是一個正規的CSS 檔案，將會套用至整個應用程式。

build：這個資料夾會包含那些被產生的 CSS 和 JavaScript 來源程式代碼。

bundle.css：所有定義於個別組件中的樣式，都會被 Svelte 產生至這個 CSS 檔案中。

bundle.js：所有的 JavaScript 來源程式代碼都會被編譯至這個JavaScript 檔案中。