如何使用Parcel设置React项目

来自菜鸟教程
跳转至：导航、​搜索

介绍

ParcelJS 将自己描述为一个速度极快、零配置的 Web 应用程序捆绑器。

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

这就是包裹进来的地方。 它吹嘘自己是一个零配置的快速捆绑工具——您只需将其指向应用程序的入口点即可。

Parcel 还提供以下功能：

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

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

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

先决条件

要完成本教程，您需要：

  • Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。

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

第 1 步 — 开始使用 Parcel

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

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 文件并向其中添加以下内容：

index.js 

console.log("hello world");

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

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

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

parcel index.html

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

检查控制台的预期输出。

第 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 文件并添加以下代码行：

src/index.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 组件将在 div 中的 index.html 文件中呈现，其中 id 为 app。

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

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

mkdir -p src/components

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

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。

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

mkdir -p src/img

在此目录中创建一个名为 parcel-logo.svg 的 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 文件：

src/index.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/：

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

第 3 步 — 为生产而构建

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

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

包.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 是默认目录），您可以通过在 [X180X 末尾附加 --out-dir directory-name 来指定] 键入 package.json：

包.json 

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

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

包.json 

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

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

包.json 

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

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

结论

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

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

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

取自“https://cainiaojiaocheng.com/index.php?title=如何使用Parcel设置React项目&oldid=27763”
Powered by MediaWiki