如何使用 Webpack 5 + Babel 從頭開始​​建立 React 應用程式 - DevDojo

banq發表於2021-08-30
WebBabelReactdev

建立 React 應用程式的最簡單方法是使用create-react-app工具。當你剛開始學習 React 時，這很好用，但它隱藏了很多關於以下方面的細節：
  • 引擎蓋下會發生什麼
  • 需要什麼配置才能使用最新功能
  • 從 ES6 到 ES5 的轉換是如何發生的

此外，在處理行業/公司專案時，大多數情況下，您需要使用自定義 webpack 配置而不是 create-react-app。
因此，在本文中，我們將從頭開始在 React 中設定 webpack 5 + Babel。
因此，不要浪費太多時間，讓我們從配置開始。
  • 建立一個新資料夾react_webpack_setup（您可以隨意命名）。

mkdir react_webpack_setup
  • 透過在終端中執行以下命令在資料夾package.json內建立一個檔案react_webpack_setup 

cd react_webpack_setup
npm init -y

  • 透過執行以下命令安裝 babel 和使用 babel 所需的外掛： 

npm install @babel/core@7.15.0 @babel/preset-env@7.15.0 @babel/preset-react@7.14.5


讓我們瞭解這些包的作用。
@babel/core - 它提供了基本的核心 babel 配置
@babel/preset-env - 它允許使用最新的 ES6/ES7/ES8 特性
@babel/preset-react - 它允許使用 JSX 的 React 語法
  • 在public建立一個新資料夾，並在其中建立一個index.html包含以下內容的新檔案： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Webpack Setup</title>
</head>
<body></body>
</html>


更多點選標題

 

相關文章