當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

parcel react_如何使用Parcel设置React应用

發(fā)布時(shí)間：2023/11/29 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 parcel react_如何使用Parcel设置React应用小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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一直是想要學(xué)習(xí)React的人最大的入門障礙之一。有很多樣板配置可能會(huì)令人困惑，尤其是在您不熟悉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設(shè)置多么簡單的演講中，嘗試并學(xué)習(xí)設(shè)置過程中的每個(gè)步驟也可能非常困難。

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的團(tuán)隊(duì)制作了create-react-app 。試圖使旋轉(zhuǎn)(非常完整的版本)React應(yīng)用程序變得像鍵入單個(gè)命令一樣簡單：

npx create-react-app my-app

Nice! 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.

真好！老實(shí)說，如果您想要一開始就具有很多風(fēng)吹草動(dòng)的東西，并且可以將應(yīng)用程序從一個(gè)相當(dāng)大/大型的應(yīng)用程序開始，那么創(chuàng)建新的React應(yīng)用程序的方法非常棒。

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來自自動(dòng)安裝為node_modules的許多依賴項(xiàng)，加載程序，插件等，每個(gè)應(yīng)用程序占用大量空間。下面的Finder摘要圖片來自我的一個(gè)create-react-app應(yīng)用程序。 😱

包裹介紹 (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是一個(gè)“快速，零配置的Web應(yīng)用程序捆綁包”。這意味著它在幕后為您處理了很多硬捆綁的內(nèi)容，并允許您創(chuàng)建相對精簡的React設(shè)置(或任何其他需要捆綁的 Web項(xiàng)目)。

So, let's see what it takes to set up the bare bones "Hello World" React app that displays an h1 element.

因此，讓我們來看看如何設(shè)置顯示h1元素的裸露“ Hello World” React應(yīng)用程序。

步驟1：為您的項(xiàng)目創(chuàng)建一個(gè)新文件夾 (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進(jìn)入新文件夾并運(yùn)行：

npm init -y

This automatically creates the package.json file.

這將自動(dòng)創(chuàng)建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添加一個(gè)“開始”腳本 (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步：創(chuàng)建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中，您可以創(chuàng)建一個(gè)名為index.html的新文件，并使用內(nèi)置的emmet快捷方式，通過鍵入感嘆號并單擊鍵盤上的Tab鍵來創(chuàng)建標(biāo)準(zhǔn)的樣板HTML文件。

Before we move on, we need to add 2 things:

在繼續(xù)之前，我們需要添加兩件事：

A div placeholder where our React app will be inserted

將在其中插入我們的React應(yīng)用的div占位符

A script to read in the JavaScript entry file (which we will create next)

要讀取JavaScript入口文件的script (我們將在接下來創(chuàng)建)

In the body of index.html, add:

在index.html的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:

創(chuàng)建一個(gè)名為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:

而已！現(xiàn)在從終端運(yùn)行：

npm start

Parcel will handle the rest, and you'll have a fully-functional React app.

包裹將處理其余部分，您將擁有一個(gè)功能齊全的React應(yīng)用程序。

結(jié)論 (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.

如果您有興趣，請花一些時(shí)間仔細(xì)閱讀Parcel文檔，以更好地了解使用Parcel所帶來的所有出色功能，而無需進(jìn)行任何配置。

Out of the box, Parcel comes with support for all kinds of common web development extensions, transpilers, syntaxes, and so on.

開箱即用，Parcel支持各種常見的Web開發(fā)擴(kuò)展，編譯器，語法等。

Although it's not tiny, the node_modules from a Parcel app take up 50% less space on your computer:

盡管不小，但Parcel應(yīng)用程序中的node_modules占用的計(jì)算機(jī)空間減少了50％：

Thanks, Parcel!

謝謝，包裹！

翻譯自: https://www.freecodecamp.org/news/how-to-up-a-react-app-with-parcel/