From 7a27138b7291452d684b7b0dcdf6bb67ae124019 Mon Sep 17 00:00:00 2001 From: Neil Date: Wed, 19 May 2021 22:18:50 +0800 Subject: Update Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started, zh-TW (#926) --- .../svelte_getting_started/index.html | 158 ++++++++++----------- 1 file changed, 79 insertions(+), 79 deletions(-) (limited to 'files/zh-tw/learn') diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html index 2cd02e8983..455ab379f7 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html @@ -17,88 +17,88 @@ tags:
{{LearnSidebar}}
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
-

此篇文章我們將提供摘要來說明 Svelte 框架。我們將會看到 Svelte 如何運作及它本身和其餘框架和工具之間的區別。接著我們將學習如何設置我們的開發環境並建立一個範例應用程式，了解其專案結構及如何在本地運行，最後可以將其建置於正式環境。

+

此篇文章我們將提供摘要來說明Svelte框架。我們將會看到Svelte如何運作及它本身和其餘框架和工具之間的區別。接著我們將學習如何設置我們的開發環境並建立一個範例應用程式，了解其專案結構及如何在本地運行，最後可以將其建置於正式環境。

- +
預備知識: -

學習它，推薦你至少需熟悉基本的 HTML、CSS 與 JavaScript 等程式語言且具備 終端機/命令列環境 基本知識。

+

學習它，推薦你至少需熟悉基本的HTML、CSS與JavaScript等程式語言且具備終端機/命令列環境基本知識。

-

Svelte 為一個編譯器，從我們的來源去產生出最小且高度優化的 JavaScript 程式碼；你將會需要 node 和 npm 來安裝此編譯器來建置你的應用程式。

+

Svelte為一個編譯器，從我們的來源去產生出最小且高度優化的JavaScript程式碼；你將會需要node和npm來安裝此編譯器來建置你的應用程式。
學習目標:設置 Svelte 本地開發環境，建立初始應用程式，瞭解 Svelte 基本運作方式。設置Svelte本地開發環境，建立初始應用程式，瞭解Svelte基本運作方式。

Svelte：一種建構豐富使用者介面的新方式

-

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

+

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

-

這種方式產生的結果並不是只有將應用程式的 Bundles 最小化和取得最佳效能，對於現代的生態環境而擁有較少技術經驗的人，可以更容易取得開發者經驗。

+

這種方式產生的結果並不是只有將應用程式的Bundles最小化和取得最佳效能，對於現代的生態環境而擁有較少技術經驗的人，可以更容易取得開發者經驗。

-

Svelte 更貼近傳統的網站開發模型（HTML、CSS、JS），它只有對 HTML 和 JavaScript 加上一些擴充，與其它框架相比，可以說只需要一點點概念和工具就能學習。

+

Svelte更貼近傳統的網站開發模型（HTML、CSS、JS），它只有對HTML和JavaScript加上一些擴充，與其它框架相比，可以說只需要一點點概念和工具就能學習。

現階段的缺點只因它目前仍在發展中——和其它成熟框架相比它的生態環境較受限於工具、支援、套件、使用模式等等限制，工作機會也比較少。但它的優點應該足夠讓你感興趣並去探索它。

-

注意：最近 Svelte 已經正式加入 TypeScript 支援，這也是最受歡迎的功能之一，我們將在之後的教學系列中看到它。

+

注意：最近Svelte已經正式加入TypeScript支援，這也是最受歡迎的功能之一，我們將在之後的教學系列中看到它。

-

我們鼓勵你走完 Svelte 教學來快速了解基本的概念，在你回來此教學系列學習如何建構一些更深入的東西之前。它應該會花費你約 30 分鐘去完成。

+

我們鼓勵你走完Svelte教學來快速了解基本的概念，在你回來此教學系列學習如何建構一些更深入的東西之前。它應該會花費你約30分鐘去完成。

使用案例

-

Svelte 可以被用來開發一小塊介面或整個應用程式。你也可以從頭開始來讓 Svelte 驅動你的使用者介面或將它漸進地整合至已存在的應用程式。

+

Svelte可以被用來開發一小塊介面或整個應用程式。你也可以從頭開始來讓Svelte驅動你的使用者介面或將它漸進地整合至已存在的應用程式。

-

不過 Svelte 特別適合處理下列幾種情況：

+

不過Svelte特別適合處理下列幾種情況：

-

此外，有了 Sapper（此框架基於 Svelte）的幫忙，你將能夠開發出帶有這些進階特徵的應用程式，像是伺服器端渲染（server-side rendering）、程式碼分離（code splitting）、以檔案為基礎的路由方式（file-based routing）、離線應用（offline）等支援。還有 Svelte Native 讓你能夠建構原生行動應用程式。

+

此外，有了Sapper（此框架基於Svelte）的幫忙，你將能夠開發出帶有這些進階特徵的應用程式，像是伺服器端渲染（server-side rendering）、程式碼分離（code splitting）、以檔案為基礎的路由方式（file-based routing）、離線應用（offline）等支援。還有Svelte Native讓你能夠建構原生行動應用程式。

-

Svelte 如何工作？

+

Svelte如何工作？

-

做為一個編譯器，Svelte 能擴展 HTML、CSS、JavaScript，產生最佳的 JavaScript 程式碼而不會有任何運行途中的消耗。為了達成這件事，Svelte 透過下列方法來擴展其原生網站技術：

+

做為一個編譯器，Svelte能擴展HTML、CSS、JavaScript，產生最佳的JavaScript程式碼而不會有任何運行途中的消耗。為了達成這件事，Svelte透過下列方法來擴展其原生網站技術：

-

只有在非常特殊的情況和 Svelte 元件的上下文中編譯器才會介入。其中對 JavaScript 的擴展相對也比較少且謹慎，就是為了不破壞 JavaScript 一些語法，而使開發人員覺得困惑。事實上，你大部分時間還是會用到原生 JavaScript 來開發。

+

只有在非常特殊的情況和Svelte元件的上下文中編譯器才會介入。其中對JavaScript的擴展相對也比較少且謹慎，就是為了不破壞JavaScript一些語法，而使開發人員覺得困惑。事實上，你大部分時間還是會用到原生JavaScript來開發。

-

Svelte 第一步

+

Svelte第一步

-

做為一個編譯器，你不能只是把 <script src="svelte.js"> 標籤加入到你的頁面並載入它到你的應用程式。你將必須設置你的開發環境，為的是能讓編譯器可以做它要做的事情。

+

做為一個編譯器，你不能只是把<script src="svelte.js">標籤加入到你的頁面並載入它到你的應用程式。你將必須設置你的開發環境，為的是能讓編譯器可以做它要做的事情。

需求

-

為了使用 Svelte，你會需要安裝 Node.js。推薦你使用長期支援版本（LTS）。Node 包含 npm（the node package manager）和 npx（the node package runner）。另外你也可以使用 Yarn 套件管理工具來代替 npm，但我們先假定你會用 npm 來走完這個教學系列。若想知道更多 npm 和 yarn 的相關資訊可以至基礎套件管理了解。 +

為了使用Svelte，你會需要安裝Node.js。推薦你使用長期支援版本（LTS）。Node包含npm（the node package manager）和npx（the node package runner）。另外你也可以使用Yarn套件管理工具來代替npm，但我們先假定你會用npm來走完這個教學系列。若想知道更多npm和yarn的相關資訊可以至基礎套件管理了解。 -

如果你是使用 Windows 的話，你將會需要安裝一些軟體來達到和 Unix/macOS 作業系統使用終端機一樣的行為，為的是接下來走教學系列時，可以使用到一些被提及的終端機指令。Gitbash（適用於 Windows 的 git 工具集中的一部分功能）或使用適用於 Linux 的 Windows 子系統（WSL），這些都是蠻合適的解決方案。Cmder 也是另一個不錯且較完善的解決方案。若想知道更多命令列的相關資訊可以至命令列課程了解。

+

如果你是使用Windows的話，你將會需要安裝一些軟體來達到和Unix/macOS作業系統使用終端機一樣的行為，為的是接下來走教學系列時，可以使用到一些被提及的終端機指令。Gitbash（適用於Windows的git工具集中的一部分功能）或使用適用於Linux的Windows子系統（WSL），這些都是蠻合適的解決方案。Cmder也是另一個不錯且較完善的解決方案。若想知道更多命令列的相關資訊可以至命令列課程了解。

若想知道更多相關資訊也可以至下列去閱讀：

-

建構你第一個 Svelte 應用程式

+

建構你第一個Svelte應用程式

-

最簡單的方式就是使用入門範本來建構初始應用程式。你可以至 sveltejs/template 下載並解壓縮出入門範本或者使用 degit 來做這件事。

+

最簡單的方式就是使用入門範本來建構初始應用程式。你可以至sveltejs/template下載並解壓縮出入門範本或者使用degit來做這件事。

為了建構你第一個入門範本應用程式，請先執行下列終端機指令：

@@ -108,10 +108,10 @@ npm install npm run dev
-

注意：不用太驚訝 degit 做了這麼多事情——它其實就只是讓你可以從 git 儲存庫下載和解壓縮最新版本的內容。使用它比起使用 git clone 更快能達到我們的目的，因為它並不會下載整個儲存庫的歷史以及不會複製一份放在本機端。

+

注意：不用太驚訝degit做了這麼多事情——它其實就只是讓你可以從git儲存庫下載和解壓縮最新版本的內容。使用它比起使用git clone更快能達到我們的目的，因為它並不會下載整個儲存庫的歷史以及不會複製一份放在本機端。

-

之後執行 npm run dev，Svelte 將會編譯和建構你的應用程式。它將會跑在本機 localhost:5000 位址。當你對來源檔案做了異動，Svelte 將會偵測到檔案更新並自動地重新編譯和刷新你的應用程式。你的瀏覽器將會顯示如下圖：

+

之後執行npm run dev，Svelte將會編譯和建構你的應用程式。它將會跑在本機localhost:5000位址。當你對來源檔案做了異動，Svelte將會偵測到檔案更新並自動地重新編譯和刷新你的應用程式。你的瀏覽器將會顯示如下圖：

A simple start page that says hello world, and gives a link to the official svelte tutorials

@@ -143,41 +143,41 @@ npm run dev

內容解釋如下：

-

讓我們來看看第一個 Svelte 元件

+

讓我們來看看第一個Svelte元件

-

元件是 Svelte 應用程式建構的基礎。使用 HTML 的超集合將它們寫至 .svelte 檔案中。

+

元件是Svelte應用程式建構的基礎。使用HTML的超集合將它們寫至.svelte檔案中。

-

全部有三個區塊—— <script>，<styles> 和標記（markup）區塊——各區塊存在與否由你決定，也沒限制區塊存放的順序。

+

全部有三個區塊——<script>，<styles>和標記（markup）區塊——各區塊存在與否由你決定，也沒限制區塊存放的順序。

<script>
   // 邏輯放這
@@ -187,13 +187,13 @@ npm run dev
/* 樣式放這 */ </style> -<!-- 標記（零或多個 HTML 元素）放這 --> +<!-- 標記（零或多個HTML元素）放這 -->
-

注意：更多元件格式的資訊，可以至 svelte 文件閱讀。

+

注意：更多元件格式的資訊，可以至svelte文件閱讀。

-

接著我們來看入門範本中的 src/App.svelte 檔案，你應該會看到以下內容：

+

接著我們來看入門範本中的src/App.svelte檔案，你應該會看到以下內容：

<script>
   export let name;
@@ -226,30 +226,30 @@ npm run dev
} </style> -

<script> 區塊

+

<script>區塊

-

<script> 區塊包含元件實例被建構時運行的 JavaScript。元件標記區塊則可以使用頂層那些被宣告或載入的變數。頂層變數是 Svelte 預設用來處理元件狀態和互動使用。我們之後會解釋更多細節來說明這代表什麼意思。

+

<script>區塊包含元件實例被建構時運行的JavaScript。元件標記區塊則可以使用頂層那些被宣告或載入的變數。頂層變數是Svelte預設用來處理元件狀態和互動使用。我們之後會解釋更多細節來說明這代表什麼意思。

<script>
   export let name;
 </script>
-

Svelte 使用 export 關鍵字將變數宣告標記為屬性，代表這個屬性可以被外部其它元件存取。這是 Svelte 擴展 JavaScript 語法讓其更有用且使用上如同以往的其中一個例子。

+

Svelte使用export關鍵字將變數宣告標記為屬性，代表這個屬性可以被外部其它元件存取。這是Svelte擴展JavaScript語法讓其更有用且使用上如同以往的其中一個例子。

標記區塊

-

標記區塊中你可以插入任何你想要的 HTML，另外你也可以插入有效的 JavaScript 表達式在大括號（{}）中。此例中我們嵌入 name 屬性值在 Hello 文字的右邊。

+

標記區塊中你可以插入任何你想要的HTML，另外你也可以插入有效的JavaScript表達式在大括號（{}）中。此例中我們嵌入name屬性值在Hello文字的右邊。

<main>
   <h1>Hello {name}!</h1>
   <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 </main>
-

Svelte 也支援一些標籤，像是 {#if...}，{#each...} 和 {#await...} ——分別允許你可以條件式渲染部分標記區塊，迭代清單元素與處理非同步數值。

+

Svelte也支援一些標籤，像是{#if...}，{#each...}和{#await...}——分別允許你可以條件式渲染部分標記區塊，迭代清單元素與處理非同步數值。

-

<style> 區塊

+

<style>區塊

-

假如你有寫過一些 CSS，下面這段應該不會太陌生：

+

假如你有寫過一些CSS，下面這段應該不會太陌生：

<style>
   main {
@@ -273,36 +273,36 @@ npm run dev
} </style> -

我們現在對 <h1> 元素套用了一些樣式。對於其它元件中的 <h1> 元素們將會有什麼影響呢？

+

我們現在對<h1>元素套用了一些樣式。對於其它元件中的<h1>元素們將會有什麼影響呢？

-

在 Svelte 中，CSS 在元件 <style> 區塊中且被侷限於該元件範圍之內。這是透過對所選的元素加上一個類別來實現，而這個類別則會是基於元件樣式的雜湊值。

+

在Svelte中，CSS在元件<style>區塊中且被侷限於該元件範圍之內。這是透過對所選的元素加上一個類別來實現，而這個類別則會是基於元件樣式的雜湊值。

-

你可以觀察到這個現象，藉由在瀏覽器開一個新標籤至 localhost:5000 位址，對 HELLO WORLD! 標籤右鍵／Ctrl點選並選擇檢查：

+

你可以觀察到這個現象，藉由在瀏覽器開一個新標籤至localhost:5000位址，對HELLO WORLD!標籤右鍵／Ctrl點選並選擇檢查：

Svelte starter app with devtools open, showing classes for scoped styles

-

編譯應用程式時，Svelte 會改變我們 h1 的樣式定義為 h1.svelte-1tky8bj 並更改每一個在此元件中的 <h1> 元素為 <h1 class="svelte-1tky8bj">，如此就能讓該元件取得所需的樣式。

+

編譯應用程式時，Svelte會改變我們h1的樣式定義為h1.svelte-1tky8bj並更改每一個在此元件中的<h1>元素為<h1 class="svelte-1tky8bj">，如此就能讓該元件取得所需的樣式。

-

注意：你也可以使用 :global(...) 修飾符覆寫此行為並且套用樣式至全域選擇器上（可以至 Svelte <style> 文件閱讀更多資訊）。

+

注意：你也可以使用:global(...)修飾符覆寫此行為並且套用樣式至全域選擇器上（可以至Svelte <style>文件閱讀更多資訊）。

-

Making a couple of changes

+

做一些小改變

-

Now that we have a general idea of how it all fits together, we can start making a few changes.
- At this point you can try updating your App.svelte component — for example change the <h1> element on line 6 of App.svelte so that it reads like this:

+

現在我們大致知道它是如何協同工作之後，接著可以來做一些小改變。
+ 你可以嘗試更新你的App.svelte元件——例如將App.svelte第6行位置的<h1>元素內容變更如下：

<h1>Hello {name} from MDN!</h1>
-

Just save your changes and the app running at localhost:5000 will be automatically updated.

+

只要儲存檔案之後，跑在localhost:5000位址的應用程式將會自動地被更新。

-

A first look at Svelte reactivity

+

初見Svelte反應性

-

In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.

+

在使用者介面框架當中，反應性意謂著當任何元件的狀態被改變時，框架能夠自動地更新DOM。

-

In Svelte, reactivity is triggered by assigning a new value to any top level variable in a component. For example, we could include a toggleName() function in our App component, and a button to run it.

+

在Svelte中，藉由在元件指定新數值給任何頂層變數來觸發反應性。舉個例子，我們可以在App元件中寫一個toggleName()方法並透過一個按鈕來觸發它。

-

Try updating your <script> and markup sections like so:

+

嘗試更新你的<script>和標記區塊如下：

<script>
   export let name;
@@ -322,15 +322,15 @@ npm run dev
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> -

Whenever the button is clicked, Svelte executes the toggleName() function, which in turn updates the value of the name variable.

+

每當按鈕被點擊，Svelte會執行toggleName()方法並更新name變數數值。

-

As you can see, the <h1> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.

+

你可以看到<h1>標籤已經自動地被更新。每當name變數數值改變時，Svelte就會在背後建立一些JavaScript程式碼來更新DOM，而沒有使用到任何virtual DOM或複雜的協調機制。

-

Note the use of : in on:click. That's Svelte's syntax for listening to DOM events.

+

注意在on:click使用的:。這是Svelte用於DOM事件監聽的語法。

-

Inspecting main.js: the entry point of our app

+

檢視main.js：我們應用程式的進入點

-

Let’s open src/main.js, which is where the App component is being imported and used. This file is the entry point for our app, and it initially looks like this:

+

讓我們打開src/main.js，它會告訴你App元件是從哪裡載入並使用。這個檔案是我們應用程式的進入點，一開始會看起來如下內容：

import App from './App.svelte';
 
@@ -343,11 +343,11 @@ const app = new App({
 
 export default app;
-

main.js starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:

+

main.js一開始就會把我們預計要使用的Svelte元件載入。然後於第3行位置會傳入選項物件並實例化它：

A look under the hood

-- cgit v1.2.3-54-g00ecf