## 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