Parcel打包示例详解-js教程-PHP中文网

首页

web前端

js教程

Parcel打包示例详解

小云云

Jan 16, 2018 pm 01:20 PM

打包详解

本文主要介绍了Parcel 打包示例(React HelloWorld)，详细的介绍了Parcel打包的特点和使用示例，有兴趣的可以了解一下，希望能帮助到大家。

Parcel 打包特点

极速打包时间

Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。

将你所有的资源打包

Parcel 具备开箱即用的对 JS, CSS, HTML, 文件及更多的支持，而且不需要插件。

自动转换

如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

配置代码分拆

使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆，因此你只需要在初次加载时加载你所需要的代码。

热模块替换

Parcel 无需配置，在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

友好的错误日志

当遇到错误时，Parcel 会输出语法高亮的代码片段，帮助你定位问题。

使用 Parcel 打包的 React HelloWorld 应用。GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/react-helloworld

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>
  <p id="root"></p>
  <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. 完成

运行

yarn start

登录后复制

或

npm start

登录后复制

在浏览器中打开 http://localhost:1234

打包过程会生产 .cache 和 dist 两个目录，如果是 git 工程，可以新建 .gitignore 文件忽略这两个目录：

.cache
dist
node_modules

登录后复制

GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/react-helloworld

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7700

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1230

显示更多

Related knowledge

Win11管理员权限获取详解 Mar 08, 2024 pm 03:06 PM

Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限

Oracle SQL中的除法运算详解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算

PHP模运算符的作用及用法详解 Mar 19, 2024 pm 04:33 PM

PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模

linux系统调用system()函数详解 Feb 22, 2024 pm 08:21 PM

Linux系统调用system()函数详解系统调用是Linux操作系统中非常重要的一部分，它提供了一种与系统内核进行交互的方式。其中，system()函数是一个常用的系统调用函数之一。本文将详细介绍system()函数的使用方法，并提供相应的代码示例。系统调用的基本概念系统调用是用户程序与操作系统内核交互的一种方式。用户程序通过调用系统调用函数来请求操作系统

Linux的curl命令详解 Feb 21, 2024 pm 10:33 PM

Linux的curl命令详解摘要：curl是一种强大的命令行工具，用于与服务器进行数据通信。本文将介绍curl命令的基本用法，并提供实际的代码示例，帮助读者更好地理解和应用该命令。一、curl是什么？curl是一个命令行工具，用于发送和接收各种网络请求。它支持多种协议，如HTTP、FTP、TELNET等，并提供了丰富的功能，如文件上传、文件下载、数据传输、代

VSCode功能详解：它如何帮助你提高工作效率？ Mar 25, 2024 pm 05:27 PM

VSCode功能详解：它如何帮助你提高工作效率？随着软件开发行业的不断发展，开发人员们追求工作效率和代码质量成为了他们工作中的重要目标。在这个过程中，代码编辑器的选择成为了一项关键的决策。而在众多的编辑器中，VisualStudioCode（简称VSCode）凭借其强大的功能和灵活的扩展性受到了广大开发者的喜爱。本文将详细介绍VSCode的一些功能，探讨

深入了解Promise.resolve() Feb 18, 2024 pm 07:13 PM

Promise.resolve()详解，需要具体代码示例Promise是JavaScript中一种用于处理异步操作的机制。在实际开发中，经常需要处理一些需要按顺序执行的异步任务，而Promise.resolve()方法就是用来返回一个已经Fulfilled状态的Promise对象。Promise.resolve()是Promise类的一个静态方法，它接受一个

Python 应用的独立宣言：PyInstaller 的自由之路 Feb 20, 2024 am 09:27 AM

PyInstaller：Python应用的独立化PyInstaller是一款开源的python打包工具，它将Python应用程序及其依赖项打包为一个独立的可执行文件。这一过程消除了对Python解释器的依赖，同时允许应用程序在各种平台上运行，包括windows、MacOS和linux。打包过程PyInstaller的打包过程相对简单，涉及以下步骤：pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile选项创建一个单一

See all articles

Parcel打包示例详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题