如何使用 Parcel 设置 React 项目

笔记首页 >> 教程系列 >> 如何使用 Parcel 设置 React 项目

如何使用 Parcel 设置 React 项目

介绍

ParcelJS将自己描述为速度极快、零配置的 Web 应用程序打包器。

Parcel 的前提是使用 JavaScript 打包器构建应用程序可能更容易。Webpack 提供了更大的可配置性，但可能存在不需要这种程度的配置的用例。

这就是 Parcel 的用武之地。它自诩为一个零配置的快速捆绑工具——您只需将它指向应用程序的入口点即可。

Parcel 还提供以下功能：

快速捆绑时间 – Parcel 的时间比其他捆绑工具快得多。下面是GitHub 上 Parcel 页面的屏幕截图。

Parcel 基准的屏幕截图

资产捆绑 – Parcel 对 JS、CSS、HTML、文件资产具有开箱即用的支持。
自动转换 – 您的所有代码都使用 Babel、PostCSS 和 PostHTML 自动转换。
代码拆分 – Parcel 允许您使用动态 import() 语法拆分输出包。
热模块替换 (HMR) – Parcel 会在您在开发过程中进行更改时自动更新浏览器中的模块，无需配置。
错误记录 – Parcel 在遇到错误时打印语法突出显示的代码帧，以帮助您查明问题。

关于 Parcel 的另一件事要注意的是，它允许开发人员使用index.html文件作为入口点，而不是 JS 模块。

在本教程中，您将使用 Parcel 设置一个 React Web 应用程序。

先决条件

要完成本教程，您需要：

Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。

本教程已通过 Node v14.4.0、npmv6.14.5、parcel-bundlerv1.12.4、reactv16.13.1 和react-domv16.13.1 验证。

第 1 步 — 开始使用包裹

首先，创建一个新的工作目录：

mkdir parcel-test

然后，导航到新的工作目录：

cd parcel-test

并通过在终端中运行以下命令来全局安装 Parcel：

npm install -g parcel-bundler

接下来要做的是package.json在您的目录中创建一个文件。您可以通过运行以下命令来执行此操作：

npm init -y

这会package.json为您生成一个工作：

包.json

{
  "name": "parcel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Parcel 可以将任何类型的文件作为其入口点，但 HTML 或 JavaScript 文件是一个不错的起点。如果您使用相对路径在 HTML 中链接您的主要 JavaScript 文件，Parcel 也会为您处理它。

创建一个index.html并向它们添加以下内容：

索引.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

这将创建一个引用 JavaScript 文件的基本网页。

接下来，创建一个index.js文件并向其中添加以下内容：

索引.js

console.log("hello world");

这将创建一个"hello world"向控制台输出消息的脚本。

现在文件已创建，您已准备好运行该应用程序。Parcel 带有内置的开发服务器，它会在您更改文件时自动重建您的应用程序，并支持热模块替换以实现快速开发。

要运行该应用程序，请运行以下终端命令：

parcel index.html

您现在可以http://localhost:1234/在浏览器中打开：

显示“hello world”文本的控制台

检查控制台以获得预期的输出。

步骤 2 — 使用 Parcel 和 React 设置项目

接下来，您将使用 Parcel 设置一个 React 项目。

在继续之前，您需要安装一些依赖项：

npm install react react-dom

上面的依赖项将安装 React 并react-dom在您的应用程序中。由于 React 是用 ES6 编写的，我们需要一种方法来转换代码。Parcel 为您完成这些，无需配置。您所要做的就是安装预设，Parcel 会为您完成繁重的工作。

npm install --save-dev babel-preset-env babel-preset-react

安装依赖项后，创建一个.babelrc文件并使用以下内容对其进行编辑：

.babelrc

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

现在 Babel 被配置为将 ES6/ES7 JavaScript 转换为对浏览器有意义的 JavaScript 包。

接下来，您可以开始创建 React 应用程序及其组件。

打开index.html文件并将其替换为下面的代码。

索引.html

<!DOCTYPE html>
<html>
<head>
  <title>React starter app</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="./src/index.js"></script>
</body>
</html>

此代码添加了一个<title>和一个<div id="app">。它还为基本样式添加了Bulma CSS 框架。它还引用了index.js我们接下来将创建的新文件。

接下来，创建一个名为的目录src：

mkdir src

并在此目录中创建一个index.js文件并添加以下代码行：

源代码/索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <h1>Hello {this.props.name}</h1>
        </div>
      </div>
    );
  }
}

let App = document.getElementById('app');

ReactDOM.render(<HelloMessage name="Yomi" />, App);

这是一个基本的 React 启动应用程序。该HelloMessage组件将中呈现index.html的文件div用id的app。

接下来，创建一个Header组件。

回到工作目录，创建一个components目录：

mkdir -p src/components

并在此目录中创建一个名为的 JavaScript 文件Header.js并添加以下代码行：

src/components/Header.js

import React from 'react';
import ParcelLogo from '../img/parcel-logo.svg';

const Header = () => (
  <header>
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <a className="navbar-item" href="/">
          <img width="120" src={ParcelLogo} alt="" />
        </a>
      </div>
    </nav>
  </header>
);

export default Header;

接下来，让我们创建ParcelLogo.

mkdir -p src/img

并在此目录中创建一个名为 SVG 文件parcel-logo.svg并添加以下代码行：

src/img/parcel-logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1068.58691 218.40186" fill="#E7DACB"><title>Asset 1</title><path d="M134.10156,41.99756c25.2002,0,42.6001,17.40039,42.6001,42.60059v54.60059c0,25.2002-17.3999,42.60059-42.6001,42.60059H66.90088v76.20117H23.7002V41.99756Zm24,46.80078c0-18.6001-10.80029-29.40039-29.40039-29.40039H42.30029V240.6001h6V164.39893h80.40088c18.6001,0,29.40039-10.7998,29.40039-29.40039ZM128.70117,65.39795c15.00049,0,23.40039,8.40039,23.40039,23.40039v46.2002c0,15.00049-8.3999,23.40039-23.40039,23.40039H48.30029v-93.001Zm-5.3999,75.60107c6.6001,0,10.2002-3.6001,10.2002-10.2002V92.99854c0-6.6001-3.6001-10.2002-10.2002-10.2002H66.90088V140.999Z" transform="translate(-23.7002 -40.79785)"/><path d="M223.79834,258.00049H179.09766L248.69873,41.99756h50.40039L368.7002,258.00049h-46.501l-14.09961-48.60156H238.19873ZM343.19922,240.6001l-55.5-181.20215H260.09863L203.69824,240.6001h5.7002l15-48.60059H322.7998L337.499,240.6001ZM263.69873,65.39795,226.19824,185.99951H320.999L284.09912,65.39795Zm9.8999,24.00049,22.80029,79.20068h-46.2002Z" transform="translate(-23.7002 -40.79785)"/><path d="M509.99512,258.00049l-34.7998-80.10107H440.39453v80.10107h-43.2002V41.99756H507.2959c25.2002,0,42.59961,17.40039,42.59961,42.60059v50.70068c0,20.3999-11.39941,35.7002-29.39941,40.80029l36,81.90137Zm18.90039-17.40039-34.7998-79.80127h7.7998c18.60059,0,29.40039-10.7998,29.40039-29.3999V88.79834c0-18.6001-10.7998-29.40039-29.40039-29.40039H415.79492V240.6001h6V160.79883h66L522.5957,240.6001ZM525.2959,131.39893c0,15-8.40039,23.3999-23.40039,23.3999H421.79492V65.39795h80.10059c15,0,23.40039,8.40039,23.40039,23.40039Zm-28.80078,6.2998c6.60059,0,10.2002-3.6001,10.2002-10.2002v-34.5c0-6.6001-3.59961-10.2002-10.2002-10.2002H440.39453v54.90039Z" transform="translate(-23.7002 -40.79785)"/><path d="M697.49316,91.79834c0-6.6001-3.59961-10.2002-10.2002-10.2002h-46.7998c-6.60059,0-10.2002,3.6001-10.2002,10.2002V208.19971c0,6.59961,3.59961,10.19922,10.2002,10.19922H687.293c6.60059,0,10.2002-3.59961,10.2002-10.19922V181.79932h43.20117V216.6001c0,25.19922-17.40039,42.59961-42.60059,42.59961H629.69238c-25.2002,0-42.59961-17.40039-42.59961-42.59961V83.39844c0-25.20068,17.39941-42.60059,42.59961-42.60059h68.40137c25.2002,0,42.60059,17.3999,42.60059,42.60059v34.80029H697.49316Zm-4.7998-27.6001c15,0,23.40039,8.3999,23.40039,23.3999v13.80029h6V87.59814c0-18.6001-10.7998-29.40039-29.40039-29.40039H635.09277c-18.59961,0-29.40039,10.80029-29.40039,29.40039V212.39893c0,18.60059,10.80078,29.40039,29.40039,29.40039h57.60059c18.60059,0,29.40039-10.7998,29.40039-29.40039V199.19971h-6v13.19922c0,15.001-8.40039,23.40039-23.40039,23.40039H635.09277c-15,0-23.40039-8.39941-23.40039-23.40039V87.59814c0-15,8.40039-23.3999,23.40039-23.3999Z" transform="translate(-23.7002 -40.79785)"/><path d="M920.38965,41.99756V82.79834H822.28809v44.40039h79.501V167.999h-79.501v49.20068h98.10156v40.80078H779.08789V41.99756ZM901.78906,240.6001v-6H803.68848v-84.001h79.501v-6.00049h-79.501V65.39795h98.10059v-6H797.68848V240.6001Z" transform="translate(-23.7002 -40.79785)"/><path d="M1001.68555,41.99756V217.19971h90.60156v40.80078H958.48535V41.99756Zm72.001,198.60254v-6H983.08594V59.39795h-6V240.6001Z" transform="translate(-23.7002 -40.79785)"/></svg>

Parcel 还支持导入图像等资产。

还要注意的另一件事是 Parcel 还附带 Sass 支持。导航回工作目录并安装node-sass以使用它：

npm install node-sass

一旦你已经node-sass安装了，你可以从JavaScript文件中导入SCSS文件。在您的index.js文件中，将以下代码行添加到文件顶部以导入 SCSS 文件：

源代码/索引.js

import './scss/app.scss'
...

接下来，让我们创建app.scss文件。

回到工作目录，创建一个名为的目录scss：

mkdir -p src/scss

并在此目录中创建一个app.scss文件并添加以下代码行：

src/scss/app.scss

body {
  background-color: #fefefe;
  text-align: center;

  .navbar {
    background: #21374B;
    color: #E7DACB;
    height: 50px;
  }

  h1 {
    font-size: 40px;
    margin-top: 30px;
  }
}

此代码为<body>和的<nav class="navbar">和排版建立了一些颜色<h1>。

现在您已完成 React 应用程序的设置，下一步是运行它并查看它是否有效。为此，您需要配置package.json. 将下面的代码行添加到package.json文件中：

包.json

"scripts": {
  "start": "parcel index.html"
},

这将创建一个将与命令一起运行的脚本npm start。该脚本将告诉 Parcel 使用该index.html文件作为入口文件启动开发服务器。

npm start在终端中运行命令：

npm start

您现在可以http://localhost:1234/在浏览器中打开：

显示“Hello World”页面的网页

此时，您有一个 React 应用程序，正在运行热模块重新加载。

第 3 步 – 为生产而构建

要使用 Parcel 准备用于生产的应用程序，您需要运行该命令。parcel build index.html

将其添加到文件中的scripts对象中package.json：

包.json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html"
},

运行该npm run build命令后，Parcel 将禁用监视模式和热模块替换，因此它只会构建一次。

npm run build

它还为所有输出包启用缩小器以减小文件大小。该build命令还启用生产模式，该模式还设置NODE_ENV=production环境变量。

Parcel 还为您提供了一些选项，您可以使用这些选项来选择您的应用如何为生产模式做好准备。

如果您希望 Parcel 的另一个目录将生产文件放入（dist是默认目录），您可以通过在键的末尾附加来指定：--out-dir directory-namebuildpackage.json

包.json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --out-dir directory-name"
},

如果您想禁用默认设置的缩小，您可以通过--no-minify在build键的末尾附加来实现，package.json如下所示：

包.json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --no-minify"
},

如果您想禁用文件系统缓存，您可以通过--no-cache在build键的末尾附加来实现，package.json如下所示：

包.json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --no-cache"
},

您可以在官方文档中阅读有关不同选项的更多信息。

结论

在本教程中，您将 Web 应用程序与 Parcel 捆绑在一起。Parcel 仍然相对较新，其支持的数量每天都在不断增加。它的用例可能与 Webpack 不同，但它是一个捆绑工具，可以在您的日常 Web 开发中考虑。

您可以查看Parcel 存储库以查看问题并提交拉取请求。

本教程的代码库可以在 GitHub 上找到。

觉得文章有用？

点个广告表达一下你的爱意吧！