如何使用 Parcel 建立 React 项目

介绍

ParcelJS将自己描述为一个惊人的快速,零配置的Web应用程序包。

Parcel 是基于构建应用程序使用 JavaScript 组合程序可以更容易的前提。Webpack 提供了更大的可配置性,但可能存在使用情况,您不需要这种程度的配置。

它自称是零配置的快速组合工具 - 您所需要做的只是指向应用程序的入口点。

Parcel 还提供以下功能:

快速包装时间 - Parcel 的时间比其他包装工具快得多. 下面是 [GitHub 上的 Parcel 页面] 的屏幕截图。

Screenshot of Parcel benchmarks

Assets Bundling - Parcel 对 JS、CSS、HTML、文件资产提供了全套支持。
自动转换 - 使用 Babel、PostCSS 和 PostHTML 自动转换您的所有代码。
代码分割 - Parcel 允许您使用动态导入()语法来分割您的输出包。
热模块更换 (HMR) - Parcel 会自动更新浏览器中的模块,当您在开发过程中做出更改时,无需配置。

Parcel 还有一点值得注意,它允许开发人员使用 index.html 文件作为入口点,而不是 JS 模块。

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

前提条件

要完成本教程,您将需要:

Node.js 是本地安装的,您可以按照如何安装 Node.js 和创建本地开发环境进行操作。

本教程已通过 Node v14.4.0、npm v6.14.5、parcel-bundler v1.12.4、react v16.13.1 和 react-dom v16.13.1 进行验证。

步骤 1 - 开始与 Parcel

首先,创建一个新的工作目录:

1mkdir parcel-test

然后,导航到新的工作目录:

1cd parcel-test

并通过在您的终端中运行下面的命令在全球范围内安装 Parcel:

1npm install -g parcel-bundler

下一步要做的是在您的目录中创建一个 package.json 文件. 您可以通过运行下面的命令来做到这一点:

1npm init -y

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

 1[label package.json]
 2{
 3  "name": "parcel-test",
 4  "version": "1.0.0",
 5  "description": "",
 6  "main": "index.js",
 7  "scripts": {
 8    "test": "echo \"Error: no test specified\" && exit 1"
 9  },
10  "keywords": [],
11  "author": "",
12  "license": "ISC"
13}

Parcel 可以将任何类型的文件作为其入口点,但一个 HTML 或 JavaScript 文件是开始的好地方. 如果您使用相对路径链接 HTML 中的主要 JavaScript 文件,Parcel 也将为您处理它。

创建一个index.html,并添加以下内容:

1[label index.html]
2<html>
3<body>
4  <script src="./index.js"></script>
5</body>
6</html>

这会创建一个基于JavaScript文件的基本网页。

接下来,创建一个index.js文件,并添加以下内容:

1[label index.js]
2console.log("hello world");

这会创建一个脚本,将Hello world消息发送到控制台。

Parcel 配备了内置的开发服务器,当您更改文件时将自动重建您的应用程序,并支持热模块更换快速开发。

要运行应用程序,请运行下面的终端命令:

1parcel index.html

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

Console displaying "hello world" text

检查控制台的预期输出。

步骤 2 — 设置一个项目与组件和反应

接下来,您将使用 Parcel 创建一个 React 项目。

在继续之前,您需要安装一些依赖:

1npm install react react-dom

上面的依赖将安装React和react-dom在您的应用程序中。因为React是写在ES6中,我们需要一种方法来转换代码。Parcel为您而做,无需配置。

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

一旦依赖性已安装,创建一个 .babelrc 文件,并用以下方式编辑它:

1[label .babelrc]
2{
3  "presets": ["env", "react"]
4}

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

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

打开index.html文件并用下面的代码替换它。

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4<head>
 5  <title>React starter app</title>
 6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
 7</head>
 8<body>
 9  <div id="app"></div>
10  <script src="./src/index.js"></script>
11</body>
12</html>

这个代码添加了<title>和<div id="app">。它还添加了Bulma CSS framwork(https://bulma.io/)用于基本的样式。

下面,创建一个名为src的目录:

1mkdir src

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

 1[label src/index.js]
 2import React from 'react';
 3import ReactDOM from 'react-dom';
 4import Header from './components/Header';
 5
 6class HelloMessage extends React.Component {
 7  render() {
 8    return (
 9      <div>
10        <Header />
11        <div className="container">
12          <h1>Hello {this.props.name}</h1>
13        </div>
14      </div>
15    );
16  }
17}
18
19let App = document.getElementById('app');
20
21ReactDOM.render(<HelloMessage name="Yomi" />, App);

该HelloMessage组件将在div中的index.html文件中与app的id进行渲染。

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

1mkdir -p src/components

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

 1[label src/components/Header.js]
 2import React from 'react';
 3import ParcelLogo from '../img/parcel-logo.svg';
 4
 5const Header = () => (
 6  <header>
 7    <nav className="navbar" role="navigation" aria-label="main navigation">
 8      <div className="navbar-brand">
 9        <a className="navbar-item" href="/">
10          <img width="120" src={ParcelLogo} alt="" />
11        </a>
12      </div>
13    </nav>
14  </header>
15);
16
17export default Header;

接下来,让我们创建ParcelLogo。

1mkdir -p src/img

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

1[label src/img/parcel-logo.svg]
2<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来使用它:

1npm install node-sass

一旦安装了node-sass,您可以从JavaScript文件中导入SCSS文件. 在您的index.js文件中,将下面的代码行添加到文件的顶部以导入SCSS文件:

1[label src/index.js]
2import './scss/app.scss'
3...

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

在工作目录中,创建一个名为scss的目录:

1mkdir -p src/scss

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

 1[label src/scss/app.scss]
 2body {
 3  background-color: #fefefe;
 4  text-align: center;
 5
 6  .navbar {
 7    background: #21374B;
 8    color: #E7DACB;
 9    height: 50px;
10  }
11
12  h1 {
13    font-size: 40px;
14    margin-top: 30px;
15  }
16}

此代码为<body>和<nav class="navbar">以及对<h1>的编码设置了一些颜色。

现在你已经完成了 React 应用程序的设置,下一步是运行它,看看它是否起作用. 要做到这一点,你需要配置 package.json。

1[label package.json]
2"scripts": {
3  "start": "parcel index.html"
4},

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

在您的终端中运行npm start命令:

1npm start

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

Web page displaying "Hello World" page

在此时刻,你有一个 React 应用程序,运行热模块重新加载。

步骤三:建设生产

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

将其添加到package.json文件中的脚本对象:

1[label package.json]
2"scripts": {
3  "start": "parcel index.html",
4  "build": "parcel build index.html"
5},

一旦您运行npm run build命令,Parcel 将禁用观看模式和热模块更换,因此它只会构建一次。

1npm run build

它还允许所有输出包的缩小器来减少文件大小. 命令构建还允许生产模式,该命令还设置了环境变量NODE_ENV=production。

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

如果您更愿意为 Parcel 插入生产文件的另一个目录(‘dist’是默认目录),您可以通过在 ‘package.json’ 中的 ‘build’ 键末尾附加 `--out-dir 目录名称’来指定:

1[label package.json]
2"scripts": {
3  "start": "parcel index.html",
4  "build": "parcel build index.html --out-dir directory-name"
5},

如果您想禁用默认设置的缩小,您可以通过在package.json中的构建键末尾添加--no-minify来做到这一点:

1[label package.json]
2"scripts": {
3  "start": "parcel index.html",
4  "build": "parcel build index.html --no-minify"
5},

如果您想禁用文件系统缓存,您可以通过在package.json中的构建键的末尾添加--没有缓存来做到这一点:

1[label package.json]
2"scripts": {
3  "start": "parcel index.html",
4  "build": "parcel build index.html --no-cache"
5},

您可以阅读更多关于官方文档中的不同选项。

结论

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

您可以查看 Parcel repo以查看问题和提交提取请求。

此教程的代码库可以在GitHub上找到(https://github.com/do-community/parcel-react)。