將包裹用作捆綁器進行反應應用

Webpack並不是鎮上唯一的資產管理遊戲遊戲。包裹提供了引人入勝的替代方案，提供了零配置的簡化資產捆綁。與其他要求廣泛的設置代碼的捆綁機不同，Parcel的簡單性是一個主要優勢。與更複雜的捆綁機相比，它的速度也值得注意，利用多核心處理的速度更快。

包裹的主要特徵和好處包括：

• 有效的代碼通過動態導入分配。
• 用於各種文件類型的多功能資產處理，包括HTML，CSS和JavaScript。
• 熱模塊替換（HMR）用於快速開發而無需持續的頁面刷新。
• 明確的錯誤突出顯示控制台，以便於調試。
• 支持環境變量管理開發和生產環境。
• 通過消除不必要的步驟來優化更快構建的生產模式。

本文演示瞭如何使用包裹構建React項目，展示了創建React應用程序的替代方案。讓我們探索一種反應發展的方法。

項目設置

1. 創建項目目錄：

 mkdir csstricks-react-parcel && cd $ _

2. 初始化package.json ：使用NPM或紗線：

 ＃npm
npm init -y

＃Yarn（本教程中使用）
YARN INIT -Y

3. 安裝依賴項：在本地安裝包裹和Babel：

紗線添加包裹捆綁Babel-Preset-env babel-preset-react-dev
紗線添加反應-dom

4. 配置babel：創建一個帶有以下內容的.babelrc文件：

 {
  “預設”：[“ env”，“ react”]
}

5. 創建index.js （應用程序組件）：

從“反應”中導入反應；
從“反應”進口反應；

類應用程序擴展react.component {
  使成為（） {
    返回 （
      <react.fragment><h2 id="你好">你好！</h2></react.fragment>
    ）；
  }
}

const rootelement = document.getElementById（“ root”）;
Reactdom.render（<app></app> ，rootelement）;

6. 創建index.html （在src目錄中）：

 


  <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>包裹反應示例</title>


  <div id="root"></div>

7. configure package.json （開始腳本）：

 “腳本”：{
  “ start”：“ node_env =開發包裹src/index.html  -  open”
}

8. 運行應用程序：執行yarn start 。該應用程序應在http://localhost:1234/瀏覽器中啟動。

與Sass的造型

包裹包括郵政編碼。要使用SASS，請安裝必要的軟件包：

紗線添加-DEV節點sass autoprefixer

postcss package.json 。

 “ Postcss”：{
  “模塊”：false，
  “插件”：{
    “ autoprefixer”：{
      “瀏覽器”：[“> 1％”，“最後4個版本”，“ Firefox ESR”，“不是IE <h3 id="生產建造">生產建造</h3><p>配置您的<code>package.json</code>生產構建的JSON：</p><pre class="brush:php;toolbar:false"> “腳本”：{
  “ start”：“ node_env =開發包裹src/index.html  -  open”，
  “構建”：“ node_env =生產包裹構建dist/ index.html -public-url ./”
}

運行yarn build以在dist文件夾中創建可以生產的構建。諸如--out-dir ， --no-minify和--no-cache等選項提供了進一步的自定義。

廢話（創建React App包裹）

創建React App包（廢話）簡化了項目設置：

 npx create-react-app-parcel my-app
CD my-app
紗線開始

結論

Parcel的易用性和優化的構建時間使其成為下一個React項目的強大競爭者。它日益普及（30,000顆Github星）說明了其社區的接受。

資源

• 包裹的例子
• 很棒的包裹

本教程的源代碼的GitHub存儲庫（提供的鏈接）。

以上是將包裹用作捆綁器進行反應應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！