使用 Parcel 作为 React 应用程序的捆绑器

您可能已经熟悉 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 文件，其中包含我们在本地工作所需的默认配置。说到这里，parcel 包可以全局安装，但对于本教程，我们将将其作为开发依赖项在本地安装。

我们在 React 中工作时需要 Babel，所以让我们开始吧

yarn add parcel-bundler babel-preset-env babel-preset-react --dev

接下来，我们安装 React 和 ReactDOM…

yarn add react react-dom

…然后创建一个 babel.rc 文件，并将以下内容添加到其中

{
  "presets": ["env", "react"]
}

接下来，我们在一个新的 index.js 文件中创建基本 App 组件。这是一个快速示例，它只返回一个“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 文件，App 组件将在其中挂载，因此让我们在 src 目录中创建一个 index.html 文件。同样，这是一个非常简单的框架来作为参考

<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 文件中的 start 脚本，使其看起来像这样

"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 build 将为生产构建应用程序，并将输出结果放在 dist 文件夹中。如果需要，我们可以添加一些其他选项来进一步细化

--out-dir directory-name：用于使用另一个目录来存放生产文件，而不是默认的 dist 目录。
--no-minify：默认情况下启用最小化，但我们可以使用此命令禁用它。
--no-cache：这允许我们禁用文件系统缓存。

💩 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 start

Parcel 已全部设置好！

Parcel 值得您在下一个 React 应用程序中探索。无需任何配置，以及捆绑时间超级优化的特点，使 Parcel 在未来项目中值得考虑。此外，在 GitHub 上拥有超过 30,000 个星标，看起来它在社区中正在获得一些关注。

其他资源

Parcel 示例：使用各种工具和框架的 Parcel 示例。
Awesome Parcel：精选的 Parcel 资源、库、工具和样板列表。

本教程的源代码可在 GitHub 上获取

Andrey Sitnik

# 2019 年 4 月 25 日

Autoprefixer 团队不建议在 browsers 选项中指定目标浏览器。

Parcel 甚至鼓励您创建 Browserslist 配置（这也是 Autoprefixer 的唯一官方方式来设置目标浏览器）。

将此内容放在 package.json 中

"browserslist": [
  ">1%", "last 4 versions", "Firefox ESR", "not ie < 9"
],

此配置将被 Autoprefixer 和 Babel 使用。因此，您将拥有所有工具的目标浏览器位置。

Johan

# 2019 年 4 月 26 日

无需指定 NODE_ENV=development 或 NODE_ENV=production，因为分别由 serve/watch 或 build 暗示。

Gil Druart

# 2019 年 8 月 3 日

不确定 CRAP 是否仍然有效，18 个月内没有提交