使用 Parcel 快速构建 React Hello World 应用

作者：小齿轮时间：2026-10-22 11:51:27浏览：532

本文介绍如何使用 Parcel 打包工具快速搭建 React 开发环境。通过初始化项目、安装 React 和 Babel 依赖、配置 .babelrc 文件，并添加 Parcel 构建命令，实现零配置下的代码打包与热更新。示例展示了从创建目录到运行本地服务器的完整步骤，适合初学者快速上手现代前端构建流程。

Parcel 核心特性与优势

Parcel 打包工具的核心特性

拥有极快的构建速度

Parcel 利用 worker 进程启用多核编译能力，并配合文件系统缓存机制，即使在构建中断后重启，也能实现快速重新编译。

全面支持各类资源打包

Parcel 开箱即用地支持 JS、CSS、HTML 及静态文件等多种资源类型，且无需额外安装插件即可处理。

自动代码转换功能

在必要时，Parcel 会自动调用 Babel、PostCSS、PostHTML 甚至 node_modules 中的包来进行代码转换，无需手动配置。

支持代码分拆配置

通过动态 import() 语法，Parcel 能够将输出文件束（bundles）进行分拆，确保用户仅在初次加载时获取所需的代码片段。

内置热模块替换（HMR）

在开发环境中，Parcel 无需任何配置即可自动实现热模块替换，随着代码更改实时在浏览器中更新模块。

友好的错误日志输出

当遇到错误时，Parcel 会输出带有语法高亮的代码片段，帮助用户快速定位问题所在。

以下是使用 Parcel 打包的 React Hello World 应用示例，GitHub 地址为：https://github.com/justjavac/parcel-example/tree/master/react-helloworld

React Hello World 项目搭建步骤

0. 新建目录


mkdir react-helloworld
cd react-helloworld

1. 初始化 npm 项目


yarn init -y

或者


npm init -y

此时将生成一个 package.json 文件，其内容如下：


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

2. 添加 React 依赖

使用 yarn 命令：


yarn add react react-dom

使用 npm 命令：


npm install react react-dom --save

此时 package.json 文件的内容变为：


 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+  "react": "^16.2.0",
+  "react-dom": "^16.2.0"
+ }
 }

3. 添加 Babel 配置

新建 .babelrc 文件


touch .babelrc

输入以下内容：


{
 "presets": ["react"]
}

添加 babel-preset-react 依赖：

使用 yarn 命令：


yarn add babel-preset-react -D

使用 npm 命令：


npm install babel-preset-react --D

此时 package.json 文件的内容更新为：


 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
-  }
+  },
+  "devDependencies": {
+   "babel-preset-react": "^6.24.1"
+  }
 }

5. 添加 Parcel 打包工具

使用 yarn 命令：


yarn add parcel-bundler -D

使用 npm 命令：


npm install parcel-bundler --D

此时 package.json 文件的内容更新为：


 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
  },
  "devDependencies": {
-   "babel-preset-react": "^6.24.1"
+   "babel-preset-react": "^6.24.1",
+   "parcel-bundler": "^1.0.3"  
  }
 }

6. 新建 index.html 文件

文件内容如下：


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

7. 新建 index.js 文件


import React from "react";
import ReactDOM from "react-dom";
const App = () => {
 return <h1>Hello World!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));

8. 添加打包命令


 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-  "test": "echo \"Error: no test specified\" && exit 1"
+  "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-preset-react": "^6.24.1"
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.0.3"  
  }
 }

9. 完成配置

运行项目