Babel

Babel 是 Web 開發者工具箱中令人驚艷的一員。它是一個很棒的工具，已經存在很長一段時間，但現在幾乎每個 JavaScript 開發者都依賴它，這種情況還會持續，因為 Babel 現在不可或缺，並為所有人解決了一個大問題。 Babel 簡介 安裝 Babel 一個示例 Babel 配置 Babel 預設 env 預設 react 預設 更多關於預設的資訊 使用 Babel 與 webpack 本文介紹的是 Babel 7，目前的穩定版本。 Babel 簡介 Babel 是一個很棒的工具，已經存在很長一段時間，但現在幾乎每個 JavaScript 開發者都依賴它，這種情況還會持續，因為 Babel 現在不可或缺，並為所有人解決了一個大問題。 哪個問題？ 這是每個 Web 開發者肯定都遇到過的問題：JavaScript 的某個特性在最新版本的瀏覽器中可用，但在舊版本中卻不行。或者 Chrome 或 Firefox 實現了它，但 Safari iOS 和 Edge 卻沒有。 例如，ES6 引入了箭頭函數： [1, 2, 3].map((n) => n + 1) 這在現代瀏覽器中都有支持。但 IE11 不支持它，也不支持 Opera Mini（怎么知道的？通過檢查 ES6 兼容性表）。 那麼你應該如何解決這個問題呢？你是應該放棄那些舊的/不兼容的瀏覽器，還是應該編寫舊的 JavaScript 代碼，讓所有用戶都開心？...

我在一個使用Babel的項目中遇到了這個問題，只要我添加了一個async函數，這個問題就會出現，但對於任何最近的JavaScript功能，問題都是一樣的： 由Parcel使用的Babel生成了一個polyfill，但為了避免這個錯誤，你還需要加載regenerator-runtime運行時。 一種解決方案是在你的主JavaScript文件的頂部添加以下內容： import 'regenerator-runtime/runtime' Parcel在默認情況下會包含這個包，增加了25KB的大小。 在代碼庫方面，最有效的解決方法是在你的package.json中添加browserslist屬性。 例如： "browserslist": [ "last 1 Chrome version" ] 對於測試來說足夠好了。支持多個瀏覽器： "browserslist": [ "last 3 and_chr versions", "last 3 chrome versions", "last 3 opera versions", "last 3 ios_saf versions", "last 3 safari versions" ] 或者： "browserslist": [ "since 2017-06" ] 你需要添加一個足夠新的版本來支持async/await，這樣Babel就不會嘗試添加一個polyfill。 在這裡檢查所有有效的值：https://github.com/browserslist/browserslist

如何使用 React 片段創建不可見的 HTML 標籤 請注意，我將返回值包裝在 div 中。這是因為組件只能返回一個元素，如果你想要多於一個元素，你需要用另一個容器標籤包裹它。 然而，這會在輸出中引入一個不必要的 div。你可以通過使用 React.Fragment 來避免這種情況： import React, { Component, Fragment } from 'react' class BlogPostExcerpt extends Component { render() { return ( <React.Fragment> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </React.Fragment> ) } } 此外，還有一種非常簡潔的簡寫語法 <></>，它僅在最新版本（和 Babel 7+）中受到支持： import React, { Component, Fragment } from 'react' class BlogPostExcerpt extends Component { render() { return ( <> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </> ) } }

SWC 是一個越來越被提到的工具。 它可以將任何 JavaScript 或 TypeScript 代碼轉換為同樣適用於較舊的瀏覽器和現代瀏覽器的 JavaScript。 簡而言之，它是新的 Babel。 但更快。 據說速度快了 20 倍以上。 作為一個「普通開發者」，你不會直接使用它。 但它被其他工具使用。 近來我們可以看到對速度的持續關注。主要是因為工具改用了更優化的系統語言，例如 Rust，而不是像 JavaScript 這樣不太優化的語言，後者在其他用例中更為優化。 在 2022 年 12 月發布的 Vite 4 現在支援 SWC 而不是 Babel。這反過來又使其更快。 SWC 也被 Turbopack 使用，後者是由 Vercel 提供的 JavaScript/TypeScript 打包器/構建系統，並作為 Vite 和 Webpack 的替代方案。

create-react-app 是開始使用 React 應用的最簡單方法。 create-react-app 是一個旨在讓您快速掌握 React 的項目。它提供了一個現成的 React 應用程序起始器，讓您可以開始構建應用程序，而不必處理 Webpack 和 Babel 的配置。 它提供了以下功能： 具有熱重載的開發服務器 集成了 Jest 的測試環境 构建 React 應用程序的能力 兼容 ES6+ 語法 打包所有 JavaScript 和資源文件 包含 CSS 自動添加器、SASS 和 CSS Modules 支持 等等！ 您可以通過使用 npx 開始使用，這是一種在不安裝命令的情況下下載和執行 Node.js 命令的簡單方法。npx 隨 npm 一起提供（自版本 5.2 起）。如果您尚未安裝 npm，請從 https://nodejs.org 安裝（npm 會隨 Node 一同安裝）。 如果您不確定自己的版本，我建議您檢查是否需要更新。 提示：如果您對終端機不熟悉，請查看我的終端機教程 https://flaviocopes.com/macos-terminal/。 當您運行 npx create-react-app <app-name> 時，npx 將下載最新的 create-react-app 版本，並運行它，然後將其從您的系統中刪除。這非常好，因為您的系統上永遠不會有過時的版本，每次運行該命令時，您都會獲得最新和最好的代碼。 讓我們開始： npx create-react-app todolist 執行完畢時的截圖： 這是執行完成後的截圖： create-react-app 在您指定的文件夾中（此例中為todolist）創建了文件結構，並初始化了 Git 存儲庫。...

解決 JavaScript 疲勞的旅程 直到幾個月前，我一看到 JavaScript 就會感到焦慮不安。 我完全受困於所謂的 JavaScript 疲勞中，無法擺脫它。 這種情況持續了好幾年。 今天，我喜歡 JavaScript 及其生態系統。 這是怎麼發生的呢？ 我從九十年代就開始以某種形式使用 JavaScript，而現在我架上有一些書，看起來在今天顯得非常有趣，書中滿滿的 document.write 陳述。 大概是在 2012-2013 年間，關於 ES6 將會帶來的巨大變化的消息在各處都跳著。 起初，我無法掌握所有事情的進展。我無法一次接受這麼多變化。JavaScript 改變了，但我表示抗拒。學好它已經費了我很多時間，而它卻在我腳下改變。 我在一篇博文的評論中看到一個真實的 點子，它表示“如果你從一開始就一直在這裡的話（對，我就是那個老人），學習現代 JavaScript 會更加困難”： 我會認為，以前（對，我就是那麼老）在那裡是更加困難的 - Tim Tate 我在 2012 年正式開始深入研究 JavaScript 和 Node.js，之前從未經歷過像 ES6 這樣的語言變革。此前一個重大變化發生在 2009 年的 ES5。ES6 徹底改變了一切。它是 JavaScript 的一次巨大改進，每天你都會遇到很多可能出現在 ES6 規範中的新功能，但你真的不知道它們是否真的會包含進去，需要每天跟上進度，其他人在推特上都在談論這些也許會成為下一個大事的東西。 var 被抛棄了。 function 不再存在。 花了很長時間才學會的原型繼承，被類（class）的奧妙所覆蓋。 這只是冰山一角。整個 JavaScript 生態系統在過去幾年中發生了巨大變化。 建置一切事物 正在發生的一個重大轉變是"建置"。 我們從一個非常簡單的東西（使用 script 標籤引入 JavaScript）發展到需要構建步驟將我們的語言編譯到某個難以理解的巨大文件中。起初我強烈抵抗，我站在我的塔樓上，拿著大砲抵抗建置的部隊。 但當 Babel 軍力出現時，我起初更加抵抗，但最終我舉起了白旗，並加入了敵人。 我意識到 Babel 不僅僅是一個引入未來、邊緣功能的時髦庫，而是在未來可以使用作為 ES2017 的工具，同樣地適用於 ES2018、ES2019 等。無路可逃。擁抱未來，Babel 是你的朋友。...