胖蔡说技术您可能已经熟悉用于项目资产管理的webpack。然而，还有另一个很酷的工具叫Parcel，它与webpack相当，因为它有助于轻松捆绑资产。Parcel真正闪光的地方在于，它不需要任何配置就可以启动和运行，而其他捆绑器通常需要编写大量代码才能启动。此外，Parcel在运行时速度极快，因为它利用了多核处理，而其他人则处理复杂而繁重的转换。
因此，简而言之，我们正在研究一些功能和优点：
- 使用动态导入进行代码拆分
- 任何类型文件的资产处理，当然也包括HTML、CSS和JavaScript
- 热模块更换，在开发过程中无需刷新页面即可更新元素
- 代码中的错误在记录时会突出显示，便于查找和更正
- 易于区分本地开发和生产开发的环境变量
- 通过防止不必要的构建步骤来加快构建的“生产模式”
希望您开始看到使用Parcel的充分理由。这并不是说它应该100%或一直使用，而是说在一些好的情况下它很有意义。
在本文中，我们将看到如何使用Parcel来设置React项目。在我们进行这项工作的同时，我们还将查看Create React App的替代方案，我们可以将其与Parcel一起用于开发React应用程序。这里的目标是以Parcel为例，了解React中还有其他工作方法。
创建一个新的工程
好的，我们首先需要的是一个项目文件夹，以便在本地工作。我们可以创建一个新文件夹，并直接从命令行导航到该文件夹：
$ mkdir csstricks-react-parcel && $_接下来，让我们在那里获得我们必须的package.json文件。我们可以通过运行以下操作之一来使用npm或Yarn：
## Using npm
$ npm init -y
## Using Yarn, which we'll continue with throughout the article
$ yarn init -y这在我们的项目文件夹中为我们提供了一个package.json文件，其中包含我们在本地工作所需的默认配置。说到这一点，包包可以全局安装，但在本教程中，我们将作为开发依赖项在本地安装它。
我们在React工作时需要Babel，所以让我们开始吧：
$ yarn add parcel-bundler babel-preset-env babel-preset-react --dev接下来，我们需要安装开发框架React、ReactDOM:
$ yarn add react react-dom然后需要配置我们的babel配置文件：babel.config.js
{
"presets": ["env", "react"]
}接下来，我们在一个新的index.js文件中创建我们的基础应用程序组件。这里有一个简单返回“Hello”标题的快速方法：
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<React.Fragment>
<h2>Hello!</h2>
</React.Fragment>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);我们需要一个HTML文件来安装应用程序组件，所以让我们在src目录中创建一个index.HTML文件。同样，这里有一个非常简单的shell：
<html lang="en">
<head>
<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>Parcel React Example</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>我们将使用我们之前安装的Parcel软件包。为了实现这一点，我们需要编辑package.json文件中的启动脚本，使其看起来如下：
"scripts": {
"start": "NODE_ENV=development parcel src/index.html --open"
}最后，让我们回到命令行，运行yarn start。应用程序应该启动并打开一个指向的新浏览器窗口http://localhost:1234/.
使用样式
Parcel开箱即用PostCSS发货，但如果我们想使用其他东西，我们完全可以做到。例如，我们可以在项目中安装node-sass来使用sass：
$ yarn add --dev node-sass autoprefixer我们已经有了autoprefixer，因为它是一个PostCSS插件，所以我们可以在package.json的PostCSS块中进行配置：
// ...
"postcss": {
"modules": false,
"plugins": {
"autoprefixer": {
"browsers": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
"flexbox": "no-2009"
}
}
}设置生产环境
我们希望确保我们的代码和资产是为生产使用而编译的，所以让我们确保告诉我们的构建过程这些代码和资产将去哪里。同样，在package-json中：
"scripts": {
"start": "NODE_ENV=development parcel src/index.html --open",
"build": "NODE_ENV=production parcel build dist/index.html --public-url ./"
}运行yarn run构建现在将构建用于生产的应用程序，并将其输出到dist文件夹中。如果我们愿意，我们可以添加一些额外的选项来进一步完善：
--out-dir目录名：这是为了使用生产文件的另一个目录，而不是默认的dist目录。- –no-minify：缩小是默认启用的，但我们可以使用此命令禁用。
- –no-minify：这允许我们禁用文件系统缓存。
CRAP (Create React App Parcel)
Create React App Parcel（CRAP）是由Shawn Swyz Wang构建的一个包，用于帮助快速为Parcel设置React应用程序。根据文档，我们可以通过运行以下程序来引导任何应用程序：
$ npx create-react-app-parcel my-app这将创建我们开始工作所需的文件和目录。然后，我们可以迁移到应用程序文件夹并启动服务器。
$ cd my-app
$ yarn startParcel 已全部设置完全
Parcel值得在您的下一个React应用程序中进行探索。事实上，没有必要的配置，捆绑包时间是超级优化的，这使得Parcel值得在未来的项目中考虑。而且，GitHub上有30000多颗星，看起来它在社区中越来越受欢迎。
其他
- Parcel Examples:：使用各种工具和框架封装示例。
- Awesome Parcel：一份精心策划的清单，里面有很棒的Parcel资源、库、工具和样板。
评论前必须登录！
注册