SWC 是一個越來越被提到的工具。 它可以將任何 JavaScript 或 TypeScript 代碼轉換為同樣適用於較舊的瀏覽器和現代瀏覽器的 JavaScript。 簡而言之，它是新的 Babel。 但更快。 據說速度快了 20 倍以上。 作為一個「普通開發者」，你不會直接使用它。 但它被其他工具使用。 近來我們可以看到對速度的持續關注。主要是因為工具改用了更優化的系統語言，例如 Rust，而不是像 JavaScript 這樣不太優化的語言，後者在其他用例中更為優化。 在 2022 年 12 月發布的 Vite 4 現在支援 SWC 而不是 Babel。這反過來又使其更快。 SWC 也被 Turbopack 使用，後者是由 Vercel 提供的 JavaScript/TypeScript 打包器/構建系統，並作為 Vite 和 Webpack 的替代方案。
現代Web應用程式也被稱為單頁應用程式（Single Page Applications）。這是什麼意思？ 在過去，當瀏覽器的功能比現在差得多，JavaScript的性能也很差時，每個頁面都是從服務器上請求的。每次點擊某些東西時，都會向服務器發送一個新的請求，然後瀏覽器會加載新的頁面。 只有非常創新的產品才會以不同的方式工作，並嘗試新的方法。 如今，受到像React這樣的現代前端JavaScript框架的推動，一個應用通常被構建為單頁應用程式：你只加載一次應用程式代碼（HTML，CSS，JavaScript），當你與應用程式交互時，通常發生的是JavaScript截取瀏覽器事件，而不是向服務器發送新的請求，然後返回一個新文檔，用戶看到的頁面從未完全被刷新，表現得更像桌面應用程式。 單頁應用程式是使用JavaScript構建的（或至少編譯為JavaScript），並在瀏覽器中運行。 技術總是一樣的，但應用程式的工作方式的哲學和一些關鍵組件是不同的。 單頁應用程式的一些例子 一些值得注意的例子： Gmail Google Maps Facebook Twitter Google Drive 單頁應用程式的優缺點 單頁應用程式對用戶來說感覺更快，因為不需要等待客戶端和服務器之間的通信，也不需要等待瀏覽器重新渲染頁面，現在可以立即獲得反饋。這是應用程式製造者的責任，但你可以使用過渡效果、旋轉圖示和任何一種優化用戶體驗的方式，這肯定比傳統的工作流程要好。 除了讓用戶體驗更快之外，服務器會消耗更少的資源，因為你可以專注於提供一個高效的API，而不是在服務器端構建佈局。 如果你還在API之上構建一個移動應用程式，那麼這將非常理想，因為你可以完全重用現有的服務器端代碼。 單頁應用程式易於轉化為漸進式Web應用程式（Progressive Web Apps），從而為你的服務提供本地緩存和支持離線體驗（或者如果用戶需要在線時提供更好的錯誤消息）。 當不需要搜索引擎優化（SEO）時，單頁應用程式是最合適的選擇。例如，對於需要登錄的應用程式。 儘管搜索引擎每天都在提升，但它們在索引使用單頁應用程式方法構建的網站時仍然存在問題，而不是傳統的服務器渲染頁面。這對於博客來說也是如此。如果你依賴搜索引擎，除非同時具有服務器呈現的部分，否則不要麻煩去創建一個單頁應用程式。 在編寫單頁應用程式時，你需要編寫大量的JavaScript。由於應用程式可能長時間運行，你需要更加注意可能的內存泄漏 - 如果在過去，你的頁面的壽命計算在幾分鐘內，那麼現在一個單頁應用可能會長時間打開，在這段時間內，如果有任何內存問題，它將使瀏覽器的內存使用量大大增加，並導致不愉快的緩慢體驗，如果不加以處理的話。 在團隊中工作時，單頁應用程式很棒。後端開發人員可以專注於API，而前端開發人員可以專注於創建最佳的用戶體驗，並利用後端構建的API。 作為缺點，單頁應用程式嚴重依賴於JavaScript。這可能會導致在低功率設備上運行應用程式時速度較慢。此外，有些訪問者可能會禁用JavaScript，你還需要考慮到你所構建的任何內容的可訪問性。 重寫導航 由於你摒棄了默認的瀏覽器導航，URL必須手動管理。 這部分被稱為路由器。一些框架已經為你處理了它們（例如Ember），其他的則需要使用能完成這項工作的庫（例如React Router）。 問題在哪裡？在開發單頁應用程式時，這曾經是開發者的一個事後考慮。這導致了常見的“後退按鈕失效”問題：當在應用程式中導航時，URL不會改變（因為瀏覽器的默認導航被劫持），當按下後退按鈕時，這通常是用戶返回到上一個屏幕的操作，卻可能跳到多年前的網站。 這個問題現在可以通過瀏覽器提供的History API解決，但大多數情況下，你會使用一個内部使用該API的庫，如React Router。tags:Single Page Applications, JavaScript, frontend frameworks
了解 Electron，這是由 GitHub 開發的跨平台框架，用於建立創新且非常受歡迎的跨平台應用程式。 Electron 是一個使用 JS、HTML 和 CSS 來建立跨平台桌面應用程式的免費開源工具，由 GitHub 開發。 許多非常受歡迎且成功的應用程式都使用了 Electron，包括 VS Code、Slack、Discord 等等。 Electron 是一個宏大的專案，它革命性地改變了原生桌面應用程式的開發方式，使之成為可能以 JavaScript 為基礎的過程。 需要注意的是：在 Electron 出現之前，已經有其他工具可以用 JavaScript 來開發桌面應用程式，但 Electron 讓這種開發方式更加普及。 尤其是 Electron 可以用於建立跨平台的桌面應用程式。在此之前，沒有任何工具可以讓你在不同平台上運行相同的應用程式。 直到 2014 年，Electron 首次發布。 快速了解 Electron 的內部結構 Electron 基本上是將 Chromium 渲染庫和 Node.js 打包在一起（Chromium 是由 Google 開源的專案，用於構建 Chrome 瀏覽器）。 你既可以使用由 Chromium 提供的畫布，運行 V8 JavaScript 引擎，也可以使用任何 Node.js 套件並運行自己的 Node.js 代碼。 你可以把它想象成桌面版的 Node.js。它本身不提供任何 GUI 元素，而是讓你使用 HTML、CSS 和 JavaScript 來創建使用者界面。 Electron 旨在提供核心功能，同時保持速度快、體積小、精簡。這些核心功能可以滿足所有應用程式的需求。 你可以使用 Electron 創建哪些類型的應用程式 你可以創建各種不同類型的應用程式，包括：...
ES 模組是 ECMAScript 的模組化標準。儘管 Node.js 已經使用 CommonJS 標準多年，但瀏覽器從未擁有模組系統，因為關鍵的決策，如模組系統，必須首先由 ECMAScript 標準化，然後由瀏覽器實現。 這個標準化過程於 ES6 完成，瀏覽器開始實現這個標準，盡力保持一切保持協調，以相同的方式工作，現在 ES 模組在 Chrome、Safari、Edge 和 Firefox（版本 60 以後）中得到支援。 模組非常強大，因為它可以將各種功能封裝起來，並將這些功能作為庫暴露給其他 JavaScript 檔案。 ES 模組語法 導入模組的語法如下： import package from 'module-name' 而 CommonJS 使用： const package = require('module-name') 模組是一個使用 export 關鍵字將一個或多個值（物件、函式或變數）導出的 JavaScript 檔案。例如，這個模組導出了一個將字串轉換為大寫的函式： export default str => str.toUpperCase() 在這個例子中，模組定義了一個預設導出，所以可以是一個匿名函式。否則它需要一個名稱來區別於其他導出。 現在，任何其他的 JavaScript 模組可以透過導入它來使用 uppercase.js 提供的功能。 可以通過使用具有特殊屬性 type="module" 的 <script> 標籤將模組添加到 HTML 頁面中： <script type="module" src="index.js"></script> 注意：這種模組導入的行為類似於 defer 的腳本加載。請參見 使用 defer 和 async 高效加載 JavaScript...
Yarn是一個JavaScript套件管理器，是npm的直接競爭對手之一，同時也是Facebook的開源項目之一。 Yarn介紹 安裝Yarn 管理套件 初始化新項目 安裝現有項目的依賴項 本地安裝套件 全局安裝套件 本地安裝開發依賴項 移除套件 檢查許可證 檢查依賴項 升級套件 如何升級Yarn Yarn介紹 Yarn是一個JavaScript套件管理器，是npm的直接競爭對手，也是Facebook的開源項目之一。 它與npm套件相容，因此它有一個重要的優勢，可以無縫取代npm。 在剛發布時，它由於並行下載和緩存，速度比npm快得多，但現在npm已經追趕上它的許多功能，所以我推薦使用npm。 工具最終會收斂到一組功能，以保持它們在相同水平上，以保持相關性，因此我們可能會在未來的npm中看到這些功能 - 競爭對象對用戶來說是好的。 安裝Yarn 雖然你可以使用npm安裝Yarn(npm install -g yarn)，但Yarn團隊不建議這樣做。 系統特定的安裝方法在https://yarnpkg.com/en/docs/install列出。例如，在macOS上，你可以使用Homebrew運行以下命令: brew install yarn 但每個操作系統都有自己首選的包管理器，這將使安裝過程非常順暢。 最終，您將在您的shell中可以使用yarn命令： 管理套件 Yarn將其依賴項寫入名為package.json的文件中，該文件位於您的項目的根文件夾中，並將依賴項文件存儲到node_modules文件夾中，就像過去使用npm一樣。 初始化新項目 運行 yarn init 將啟動一個交互式提示，幫助您快速啟動一個項目。 安裝現有項目的依賴項 如果您已經有一個包含依賴項列表的package.json文件，但是尚未安裝套件，運行以下命令： yarn 或者 yarn install 開始安裝過程。 本地安裝套件 使用以下命令將套件安裝到項目中： yarn add package-name 全局安裝套件 yarn global add package-name 本地安裝開發依賴項 yarn add --dev package-name 相當於npm的--save-dev標誌 移除套件 yarn remove package-name 檢查許可證 在安裝許多依賴項時，這些依賴項可能還有很多依賴項，您會安裝許多您對其使用的許可證一無所知的套件。 Yarn提供了一個便利的工具，可以打印出您所有依賴項的許可證： yarn licenses ls 它還可以自動生成一個免責聲明，其中包含您使用的所有項目的所有許可證：...
如何使用 module.exports API 將數據公開給應用程序中的其他文件，或者公開給其他應用程序。 Node 具有內置的模塊系統。 Node.js 文件可以導入其他 Node.js 文件公開的功能。 當你想要導入某些東西時，你可以使用 const library = require('./library') 來導入位於當前文件夾中的 library.js 文件中公開的功能。 在這個文件中，必須先公開功能，才能被其他文件導入。 文件中默認情況下定義的任何其他對象或變量都是私有的，不會對外部世界公開。 這就是 module 系統 提供的 module.exports API 所允許的。 當你將對象或函數指定為一個新的 exports 屬性時，該對象或函數就被公開了，因此可以在應用程序的其他部分或其他應用程序中導入。 有兩種方法可以實現這樣做。 第一種是將對象分配給 module.exports，它是模塊系統提供的一個預設對象，這將使你的文件僅導出該對象： const car = { brand: 'Ford', model: 'Fiesta' } module.exports = car //..在另一個文件中 const car = require('./car') 第二種方法是將導出的對象作為 exports 的屬性添加。這種方式允許你導出多個對象、函數或數據： const car = { brand: 'Ford', model: 'Fiesta' } exports.car = car 或者直接這樣寫： exports.car = { brand: 'Ford', model: 'Fiesta' } 在其他文件中，你可以通過引用導入的屬性來使用它：...
在現代 JavaScript 網頁開發工作流中，通常會使用 npm 套件來安裝 JavaScript。然而，有時我們需要包含一個外部的 JavaScript 檔案，而現代的工具可能會讓這件事變得有些困難。 特別是在我的網站中需要包含來自 Wistia 的視頻時，經過快速查看後，一切看起來比我想像的要複雜得多。Wistia 給了我這個 HTML 片段來嵌入視頻： <script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia\_responsive\_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia\_responsive\_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia\_embed wistia\_async\_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia\_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div> 在一個「正常」的 HTML 網站中，比如我通常使用 Hugo 構建的網站，這是非常簡單的。我只需要將這段程式碼添加到我的頁面中即可。 但是在一個 Gatsby 頁面中，這是一個 React 組件，該怎麼做呢？ 我查看了一些插件，但沒有一個真正符合我的需求。解決方案可能有些「hacky」，但效果非常好，而且我仍然覺得對發生的事情有掌控權。 我將 HTML 片段轉換成了 JSX，並正確地轉換了所有的 HTML 屬性：class -> className，aria-hidden -> ariaHidden，以及樣式 - 可以使用像 htmltojsx 這樣的工具來快速轉換。 然後，我將這段程式碼添加到 gatsby-browser.js 檔案中，在頁面加載時加入我需要的腳本： const addScript = url => { const script = document....
以下是我使用的方法來選擇具有特定表情符號的 Notion 頁面的所有子頁面： const notion = new Client({ auth: process.env.NOTION_API_KEY }) const pageId = process.env.NOTION_PAGE_ID async function getAllSubpagesOfPage(page, notion) { const pages = [] const blocks = await notion.blocks.children.list({ block_id: page.id, }) for (const block of blocks.results) { if (block.type === 'child_page') { //我們需要為該區塊添加圖標， //因為它不是默認提供的 const temp = await notion.pages.retrieve({ page_id: block.id }) block.icon = temp.icon pages.push(block) } } return pages } const pages = await getAllSubpagesOfPage(page, notion) pages.map(async (page) => { if (page....
當我需要創建React應用程式並需要後端時，我會首選使用 Next.js 框架。 Next.js 提供了許多內建功能，它非常受歡迎，遵循的約定也避免了我在分析和決策方面的困惑。 但有時我只想創建一個單純的 React 應用程式，也許是為了進行演示或開始一個專案，而不需要 Next.js 提供的所有內容。 我不想擔心這些，我只想自由地進行 React 實驗。 我過去使用過 create-react-app，但現在我使用 Vite。 Vite 是一個現代化的工具，提供了開發伺服器，速度非常快，許多 JavaScript 社群的人認為它是最佳選擇。 此外，它並不是一個特定於 React 的工具，因此你學到的任何東西都可以應用到其他支援的框架，例如Svelte、Vue等。 要使用 Vite 創建一個項目，首先進入你存放所有專案的文件夾，例如我個人的案例中是在用戶的主文件夾中的 dev 文件夾下。 然後運行 npm create [[email protected]](/cdn-cgi/l/email-protection)。 為項目選擇一個名稱，該名稱也將是項目的文件夾名稱。在這個案例中，我選擇 “test”： 現在可以選擇一個框架，選擇 “React”。 然後選擇 JavaScript 或 TypeScript，依照個人喜好選擇。你也可以選擇使用 SWC。 完成！ 現在進入新建立的專案資料夾： cd test 運行以下指令安裝相依套件： npm install 然後運行以下指令開始應用程式： npm run dev 應用程式應該會在 http://localhost:5173 運行（如果該埠口已被使用，則可能會不同）。 現在你已經準備好在此應用程式上工作了！ 以下是在 VS Code 中打開的應用程式資料夾。 你可以看到，Vite 已經創建了一個基本的應用程式，現在你可以打開 src/App.jsx 開始在其中進行開發工作。 這樣的工具之美在於，現在你可以新增文件，Vite 會自動識別它們，而無需像我們以前需要在 Node.js 專案中那樣重啟 npm run dev。...
Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。 介绍Axios 安装 Axios API GET请求 给GET请求添加参数 POST请求 介绍Axios Axios是一个非常受欢迎的JavaScript库，可用于执行HTTP请求，并可在浏览器和Node.js平台上运行。 它支持所有现代浏览器，包括对IE8及更高版本的支持。 它基于Promise，这使得我们可以使用async/await代码来轻松地执行XHR请求。 与原生的Fetch API相比，使用Axios有很多优势： 支持较旧的浏览器（Fetch需要一个polyfill） 支持中止请求的方式 支持设置响应超时的方式 内置的CSRF保护 支持上传进度 执行自动的JSON数据转换 在Node.js中工作 安装 可以使用npm在Node.js中安装Axios： npm install axios 在浏览器中，可以使用unpkg.com将其包含在页面中： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 需要注意的是，API调用必须启用CORS，以便在浏览器中访问，否则请求将失败。 Axios API 可以从"axios"对象开始一个HTTP请求： axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get' }) 这将返回一个promise。您可以使用async/await来解析该promise以获取响应对象： ;(async () => { const response = await axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get' }) console.log(response) })() 为方便起见，通常会使用以下方法： axios.get() axios.post() 与jQuery中的$.ajax()相比，它们提供了更简洁的语法。例如： ;(async () => { const response = await axios.get('https://dog.ceo/api/breeds/list/all') console.log(response) })() Axios提供了所有HTTP动词的方法，虽然它们不太常用，但仍然会被使用：...