---
# System prepended metadata

title: Node.js、npm、Svelte

---

## npm
npm vs npx
* npm 會安裝在本機和專案上
* npx 會安裝套件、執行、刪除
* NPKILL 每三個月到六個月跑一次，找出不用的node_modules folder
    * npx npkill
    * 不是很常建立專案: npx creat-react-app my-app
不常用的套件可以用npx
ex: Creat-React-app, npkill
推薦盡量用npx
看套件官方文件說用哪一個

### Node.js

### Svelte
跟著這篇文章做
* 第 01 天：介紹 Svelte: https://ithelp.ithome.com.tw/articles/10319905

#### 第02天
* 用npm指令安裝需要的 Svelte 開發環境
    * npm create vite@latest
    * 輸入the-great-svelte 當作專案名稱
    * 選擇 Svelte 作為專案的框架。
    * 選擇 JavaScript 作為開發 Svelte 的方式
    * cd the-great-svelte
    * npm install
    * npm run dev
    ![image](https://hackmd.io/_uploads/Hy2F1JOeel.png)
    ==node.js版本太舊==
    * fnm install 20
    * fnm use 20
    * fnm env --use-on-cd | Out-String | Invoke-Expression
    * 成功在 http://localhost:5173/ 運行的 Svelte 樣板網頁！
    ![image](https://hackmd.io/_uploads/H1Djbyuxle.png)
    ![image](https://hackmd.io/_uploads/ry9KZJ_gxl.png)
    
    
## Svelte 程式範例：動手寫一個「蕃茄鐘工作法」小專案
* https://codelove.tw/@tony/post/gqBOZx

    

## node專案目錄結構
以下參考蕃茄鐘專案創建後的目錄結構：
* node_modules/
    * 儲存npm安裝的所有相依套件
    * npm install時會自動建立
    * 會被.gitignore忽略
* public/
    * 存公開的靜態資源（html、圖片、css等），會直接被提供給瀏覽器
    * rollup最後會將應用程式打包注入這裡的html檔
* scripts/
    * 自定義腳本檔案(部署、測試、啟動指令)
    * 放執行檔的地方（也可以取名為bin)
* src/
    * 存主要程式檔(.js、 .svelte)
* .gitignore
    * 存放在 root(C:)
    * 告訴 Git 在版本控制中忽略那些檔案或資料夾
    * 通常包刮 node_modules 目錄、編譯後的檔案、環境設定檔等
* package-lock.json
    * 鎖定相依套件的版本，確保所有開發者安裝相同的版本
    * npm install時自動建立  
* package.json
    * 專案基本設定檔(所有npm專案都需此檔)
    * npm在此管理專案的相依套件以及設定資訊
    * npm install 會根據此檔自動下載所需套件
    * 記錄：專案名稱、版本、描述、相依套件、script指令(詳情見下方)
* README.md
    * 記錄：專案簡介、安裝指引、使用方式等
* rollup.config.js
    * Rollup打包工具的設定檔
    * 定義：入口檔案、輸出位置與格式、使用哪些plugin
    * 必備於使用Rollup的的專案中

-------------------------------
### 重要檔案
* index.html
    * 為專案的主 HTML 檔案
    * 通常在這引入主要的 JS 檔案
    * 在 `<body>` 標籤中設置根元件(Svelte 應用的啟動點)
* app.css
    * 是全局樣式表(stylesheet)檔案
    * 也可改名為 global.css 或 styles.css 
* App.svelte
    * 為 Svelte 應用的根元件
    * 定義了應用的主要結構和邏輯
    * 導入其他組件(e.g., Counter.svelte)
* main.js
    * 應用的入口文件(Entry File)
        * 瀏覽器或程式會第一個載入並執行的檔案
    * 將根元件(App.svelte)掛載到 DOM 中，並啟動 Svelte 應用

:::success
**Svelte 專案檔案架構圖**

C:.
│　　.gitignore
│　　**index.html**
│　　jsconfig.json
│　　package-lock.json
│　　package.json
│　　README.md
│　　svelte.config.js
│　　vite.config.js
│
├───.vscode
├───node_modules
├───public
│　　　　vite.svg
│
└───src
　　　│   **app.css**
　　　│   **App.svelte**
　　　│   **main.js**
　　　│   vite-env.d.ts
　　　│
　　　├───assets
　　　│       svelte.svg
　　　│
　　　└───lib
　　　　　　　Counter.svelte

:::



#### scripts/
![image](https://hackmd.io/_uploads/HkkBYg-bxg.png)

## 專有名詞之間的關係
* fnm 是下載與管理 node.js 的工具
* node.js 是 js 的執行環境
* npm 負責管理 node 的套件，npm install 時會直接把svelte與其他相關套件一起載入
* svelte是前端框架，可以封裝不同區塊的前端程式，需要Rollup檔打包並透過npm run dev / npm run build 編譯成js程式碼，即可透過瀏覽器開啟

### package.json
package.json是JSON物件，內部的每個屬性是目前專案的基礎設定資訊

格式為:
```jsonld=
{
  "屬性":"值",
  "屬性":{
	"屬性":"值",
	"屬性":"值"
  },
  "屬性":"值"
}
```
* name: 套件名稱
* version: 套件版本編號
    * 格式: 22.15.0 (主要版本.次要版本.修補版本)
    * 主要版本是偶數的為長期支援版(LTS)
* description: 套件的描述
* main: 
請參考學姊寫的package.json



參考資料：https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started


https://ithelp.ithome.com.tw/articles/10321731