parcel react
For a long time Webpack was one of the biggest barriers-to-entry for someone wanting to learn React. There's a lot of boilerplate configuration that can be confusing, especially if you're new to React.
長期以來， Webpack一直是想要學習React的人最大的入門障礙之一。 有很多樣板配置可能會令人困惑，尤其是在您不熟悉React的情況下。
Even in a talk trying to show how easy React is to set up, it can be very difficult to try and learn each and every step in the setup process.
即使在試圖說明React設置多么簡單的演講中 ，嘗試并學習設置過程中的每個步驟也可能非常困難。
Not too long after React was first out of beta, the team at Facebook made create-react-app. It was an attempt to make spinning up a (very fully-loaded version of a) React app as simple as typing a single command:
在React首次退出Beta版后不久，Facebook的團隊制作了create-react-app 。 試圖使旋轉(非常完整的版本)React應用程序變得像鍵入單個命令一樣簡單：
npx create-react-app my-appNice! And honestly, this 👆 method of creating a new React app is awesome if you want something that has lots of bells and whistles right from the get-go, and you're okay with having your app start as a fairly heavy/large app.
真好！ 老實說，如果您想要一開始就具有很多風吹草動的東西， 并且可以將應用程序從一個相當大/大型的應用程序開始，那么創建新的React應用程序的方法非常棒。
That heaviness comes from the many dependencies, loaders, plugins, and so on automatically installed as node_modules that take up a lot of space for each app. The Finder summary image below is from one of my create-react-app apps. 😱
node_modules來自自動安裝為node_modules的許多依賴項，加載程序，插件等，每個應用程序占用大量空間。 下面的Finder摘要圖片來自我的一個create-react-app應用程序。 😱
包裹介紹 (Introducing Parcel)
Parcel is a "Blazing fast, zero configuration web application bundler." This means it handles a lot of the hard bundling stuff for you under the hood and allows you to create a relatively lean setup of React (or any other web project that requires bundling).
Parcel是一個“快速，零配置的Web應用程序捆綁包”。 這意味著它在幕后為您處理了很多硬捆綁的內容， 并允許您創建相對精簡的React設置(或任何其他需要捆綁的 Web項目)。
So, let's see what it takes to set up the bare bones "Hello World" React app that displays an h1 element.
因此，讓我們來看看如何設置顯示h1元素的裸露“ Hello World” React應用程序。
步驟1：為您的項目創建一個新文件夾 (Step 1: Create a new folder for your project)
Easy enough. 😏
很簡單。 😏
步驟2：建立您的package.json檔案 (Step 2: Create your package.json file)
In terminal, cd into the new folder and run:
在終端中， cd進入新文件夾并運行：
npm init -yThis automatically creates the package.json file.
這將自動創建package.json文件。
第三步：安裝Parcel，React和ReactDOM (Step 3: Install Parcel, React, and ReactDOM)
npm install --save-dev parcel-bundler
# Shorthand version: npm i -D parcel-bundlernpm install react react-dom
# Shorthand version: npm i react react-dom
# Note that npm will automatically save dependencies to package.json now, so there's no longer a need to do npm install --save ... 第4步：向package.json添加一個“開始”腳本 (Step 4: Add a "start" script to package.json)
In the package.json file, in the "scripts" section, add the following "start" script:
在package.json文件的“腳本”部分中，添加以下“開始”腳本：
"start": "parcel index.html --open" 第5步：創建index.html文件并添加幾行 (Step 5: Create the index.html file and add a couple lines)
In VS Code, you can create a new file called index.html and use the built-in emmet shortcut to create a standard boilerplate HTML file by typing an exclamation point and hitting the Tab key on your keyboard.
在VS Code中，您可以創建一個名為index.html的新文件，并使用內置的emmet快捷方式，通過鍵入感嘆號并單擊鍵盤上的Tab鍵來創建標準的樣板HTML文件。
Before we move on, we need to add 2 things:
在繼續之前，我們需要添加兩件事：
A
divplaceholder where our React app will be inserted將在其中插入我們的React應用的
div占位符A
scriptto read in the JavaScript entry file (which we will create next)要讀取JavaScript入口文件的
script(我們將在接下來創建)
In the body of index.html, add:
在index.html的body中，添加：
<body><div id="root"></div><script src="./index.js"></script>
</body> 步驟6：建立index.js檔案 (Step 6: Create the index.js file)
Create a new file called index.js and enter your bare bones React code:
創建一個名為index.js的新文件，然后輸入您的裸露React代碼：
// index.js
import React from "react"
import ReactDOM from "react-dom"ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))步驟7：開始！ (Step 7: Start it up!)
That's it! Now from the terminal, run:
而已！ 現在從終端運行：
npm startParcel will handle the rest, and you'll have a fully-functional React app.
包裹將處理其余部分，您將擁有一個功能齊全的React應用程序。
結論 (Conclusion)
If you're interested, take some time to peruse the Parcel documentation to better understand all the awesomeness that comes with using Parcel, without requiring any configuration on your end.
如果您有興趣，請花一些時間仔細閱讀Parcel文檔，以更好地了解使用Parcel所帶來的所有出色功能，而無需進行任何配置。
Out of the box, Parcel comes with support for all kinds of common web development extensions, transpilers, syntaxes, and so on.
開箱即用，Parcel支持各種常見的Web開發擴展，編譯器，語法等。
Although it's not tiny, the node_modules from a Parcel app take up 50% less space on your computer:
盡管不小 ，但Parcel應用程序中的node_modules占用的計算機空間減少了50％：
Thanks, Parcel!
謝謝，包裹！
翻譯自: https://www.freecodecamp.org/news/how-to-up-a-react-app-with-parcel/
parcel react
![[No0000B0]ReSharper操作指南1/16-入門與簡介](http://pic.xiahunao.cn/[No0000B0]ReSharper操作指南1/16-入門與簡介)
![[CTSC2008]圖騰totem](http://pic.xiahunao.cn/[CTSC2008]圖騰totem)
