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

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

真好！老实说，如果您想要一开始就具有很多风吹草动的东西，并且可以将应用程序从一个相当大/大型的应用程序开始，那么创建新的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 -y

This 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 div placeholder where our React app will be inserted
将在其中插入我们的React应用的div占位符
A script to 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 start

Parcel 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!

谢谢，包裹！