parcel react

by Michael Ozoemena

迈克尔·奥索埃梅纳(Michael Ozoemena)

如何使用Parcel捆绑React.js应用程序 (How to use Parcel to bundle your React.js application)

什么是包裹？ (What’s Parcel?)

Parcel is a web application bundler which offers a blazingly fast performance utilizing multicore processing and requires zero configuration.

Parcel是一个Web应用程序捆绑程序，它利用多核处理提供了极快的性能，并且需要零配置。

So like Webpack? Yes, like Webpack, but lighter and with no configuration required.

像Webpack一样？ 是的，像Webpack一样，但重量更轻且不需要任何配置。

本文提供的内容。 (What this article offers.)

In this article, I’ll show you how you can make use of Parcel to bundle your basic React.js app built with JavaScript (ES6), HTML, and CSS. We will be creating a React.js app from “scratch” without using tools like create-react-app or anything like that.

在本文中，我将向您展示如何利用Parcel捆绑使用JavaScript(ES6)，HTML和CSS构建的基本React.js应用程序。 我们将从头开始创建一个React.js应用程序，而无需使用诸如create-react-app类的工具。

入门。 (Getting started.)

The first thing we need to do is set up our project. I have created some starter files on GitHub, and you can see them here. When you have the project cloned on your computer, run git checkout beginning and npm install to put things in a “starter” position (note that at this point, the project doesn’t really work because we don’t have any bundled files yet).

我们需要做的第一件事是设置我们的项目。 我已经在GitHub上创建了一些入门文件，您可以在此处看到它们。 当您将项目克隆到计算机上时，请运行git checkout beginning npm install和npm install将其置于“起始”位置(请注意，由于我们还没有捆绑的文件，因此该项目目前还无法正常工作)。

捆绑文件。 (Bundling the files.)

Now, we have a simple express server set up to serve files from the dist/ folder. The reason you see cannot GET / when you run npm start and go to localhost:5000/ is because no build has happened yet. As such, the dist/ folder is empty/non-existent.

现在，我们已经建立了一个简单的express服务器，可以从dist/文件夹提供文件。 当您运行npm start并转到localhost:5000/时，看到cannot GET /的原因是尚未发生任何构建。 因此， dist/文件夹为空/不存在。

In order to start bundling our files and have something show up when you go to localhost:5000/, we need to do a few things:

为了开始捆绑文件并在您进入localhost:5000/时显示一些内容，我们需要做一些事情：

1. Install Parcel by running npm install parcel-bundler --save.

   通过运行npm install parcel-bundler --save安装Parcel。

2. Create build scripts.创建构建脚本。
3. Run the build scripts and start our server.运行构建脚本并启动我们的服务器。

4. Load up localhost:5000/ in the browser.

   在浏览器中加载localhost:5000/ 。

创建构建脚本和捆绑文件。 (Creating build scripts and bundling files.)

Before we move into actually creating the build scripts and adding it to our package.json file, let’s learn a bit more about bundling files.

在我们开始实际创建构建脚本并将其添加到package.json文件之前，让我们进一步了解如何捆绑文件。

Note that the parcel command will not work if you only have parcel installed in your project’s node_modules folder and not globally using the -g flag.

请注意 ， parcel命令将不会工作，如果你只有parcel在项目中安装的node_modules文件夹，而不是全局使用-g标志。

A nice feature that comes with Parcel (aside from other amazing stuff) is the in-built dev-server with hot module replacement. You can simply make use of this dev-server by running parcel index.html where index.html is your entry HTML file.

Parcel附带的一个不错的功能(除了其他出色的功能)是带有热模块替换功能的内置dev-server 。 您可以通过运行宗地parcel index.html来简单地使用此dev-server ，其中index.html是您的输入HTML文件。

Unfortunately, we won’t be utilizing the dev-server feature in our demo project, because we’ve built our own little express server, but this doesn’t mean we won’t still have hot module replacement. Feel free to give the dev-server a spin on your own time.

不幸的是，我们不会在演示项目中使用dev-server功能，因为我们已经构建了自己的小型express服务器，但这并不意味着我们仍不会进行hot module replacement 。 随意让自己的时间dev-server 。

The commands we want to use instead are:

我们要使用的命令是：

• parcel watch index.html to build our files into dist/ folder and to “watch” for changes to our files during development mode, and

  parcel watch index.html ，将我们的文件构建到dist/文件夹中，并在开发模式下“监视”我们文件的更改，以及

• parcel build index.html to just build our files and dump them into dist/ folder (useful for production mode).

  parcel build index.html即可构建我们的文件并将其转储到dist/文件夹(对于生产模式有用)。

If we had run npm install parcel-bundler -g instead of npm install parcel-bundler --save, then the commands in the previous paragraphs will run smoothly — but we didn’t. We installed Parcel into our local node_modules folder, so instead of running parcel index.html, we’ll run ./node_modules/.bin/parcel index.html to get our files bundled.

如果我们运行了npm install parcel-bundler -g而不是npm install parcel-bundler --save ，那么前几段中的命令将运行得很顺利，但事实并非如此。 我们将Parcel安装到本地的node_modules文件夹中，因此，我们将运行./node_modules/.bin/parcel index.html来捆绑文件，而不是运行parcel index.html 。

Now that we’ve learned all that, we can proceed to editing our package.json file and adding our build scripts into it.

现在，我们已经了解了所有这些内容，我们可以继续编辑package.json文件，并将构建脚本添加到其中。

As you can see, I have created three npm scripts. Now, when we run npm run parcel:watch we will have our files built into the dist/ folder. We’ll also have Parcel watching out for the changes we make as we edit our CSS, HTML, and JavaScript files so it’ll hot-reload the page for us.

如您所见，我创建了三个npm scripts 。 现在，当我们运行npm run parcel:watch我们会将文件内置到dist/文件夹中。 我们还将让Parcel在编辑CSS，HTML和JavaScript文件时注意所做的更改，以便为我们重新加载页面。

查看结果。 (Viewing the results.)

In order to view our simple React.js app in the browser, we can run npm start (an already existing script) to start our express server, which should then be listening to localhost:5000/.

为了在浏览器中查看我们简单的React.js应用程序，我们可以运行npm start (一个已经存在的脚本)来启动我们的express服务器，然后该express服务器应侦听localhost:5000/ 。

要拿走的关键东西。 (Key things to take away.)

1. You can get up and running with Parcel with absolutely zero configurations. All you have to do is install it and run the commands.您可以使用绝对零配置的Parcel来启动并运行。 您所要做的就是安装它并运行命令。
2. Parcel is suitable for both development and production modes.包裹适用于开发和生产模式。

3. Parcel has an in-built dev-server and hot module replacement to help you quickly get moving.

   Parcel具有内置的dev-server和hot module replacement ，可帮助您快速迁移。

4. There’s more to Parcel than what’s in this article, so be sure to look at the documentation to get more in-depth.

   除了本文中介绍的内容外，Parcel还包含更多内容，因此请务必查看文档以进行更深入的了解。

I hope you enjoyed it. If you did, don’t forget to leave a comment and a few claps.

我希望你喜欢它。 如果您这样做了，别忘了发表评论和鼓掌。

翻译自: https://www.freecodecamp.org/news/how-to-use-parcel-to-bundle-your-react-js-application-d023979e9fe4/

parcel react