parcel简介 - build - 前端 - 技术设计

官方地址： https://parceljs.org/getting_...

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

# 特性

零配置： Parcel 不需要配置文件，它会自动识别和配置项目中的文件，简化了构建过程。
快速： 使用多核处理器并行地构建项目，提高了构建速度。
支持多种文件类型： Parcel 可以处理各种前端资源文件，无需手动配置 loader。
在需要的时候自动使用 Babel、PostCSS 和 PostHTML 自动转换模块，甚至是 node_modules。
内置支持模块热替换。
友好的错误记录体验，语法突出显示的代码帧有助于查明问题。

# 工作方式

parcel 将资源树转换为 bundle 树。许多其它的打包工具基本上都是基于 JS 资源，其它格式都是粘贴的 - 例如，默认情况下以字符串的形式内嵌到 JS 中。parcel 是文件类型无关的 - 它可以按照你期望的方式与任何类型的资源一起工作，无需配置。

parcel 将一个入口点作为输入，可以是任何类型的：JS 文件，HTML，CSS，image 等。在 parcel 中定义了各种资源类型，它们知道如何处理特定的资源类型。资源文件被解析，它的依赖关系被提取，并转换成最终的编译形式。这创建了一个资源树。

一旦资源树被构建，资源就被放入一个 bundle 树中。为入口资源创建一个 bundle，并为动态导入的资源创建子 bundle，这回导致代码拆分的发生。当导入不同类型的资源的时候就会创建子 bundle，例如如果你在 JavaScript 中导入 CSS 文件，它就会打包成对应 JavaScript 的兄弟 bundle。如果一个资源需要多个 bundle，它会被打包到最近的共同祖先，因此它不会被包含多次。

在构建 bundle 树之后，每一个包都有特定的文件类型的包装器写入文件。打包器知道如何将每个资源的代码合并到由浏览器加载的最终文件中。

# webpack 与 parcel 比较

Webpack 打包时间 = parse string n + transform n + parse to AST + compress

Parcel 打包时间 = parse to AST + transform * n + compress

Webpack 之所以有时感觉很慢，是因为代码转译全靠 loader 进行字符串处理。比如一个 index.js 有可能要经历 loaderA -> loaderB -> loaderC，这些 loader 完全不知道彼此之间的存在，都是接过来一个字符串自己处理，然后再交给下一个。如果最后再 uglify 一下还要先 parse 为 AST（抽象语法树）再压缩，这一步也是比较耗时的。

因此，parcel 至少为我们提供了一个很好的思路：多步转译 + 压缩时，每一步都可以利用到已经解析过后的 AST，只要完成各自的 transform 即可。

# 入门

安装
yarn global add parcel-bundler
或
npm install -g parcel-bundler
Parcel 可以将任何类型的文件作为 entry point (入口点)，但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中，Parcel 也会为你处理，并将该引用替换为输出文件的 URL。
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
console.log("hello world");
Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持模块热替换，以便你快速开发。你只需指定入口文件即可：
```
parcel index.html
```

# 使用 Parcel 快速搭建开发环境

使用 Parcel 快速搭建开发环境非常简单，并创建一个简单的地图，以下是步骤：

# 步骤：

1. 安装 Parcel 和 ol：

确保已经在项目中安装了 Node.js 和 npm。然后运行以下命令：

	npm init -y
	npm install ol --save // 我当前安装的版本是最新版，也就是^8.2.0
	npm install -D parcel-bundler

2. 创建 HTML 文件：

在项目根目录创建一个 index.html 文件，引入 OpenLayers 库和你的主应用文件：

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>OpenLayers App</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	html,
	body,
	#map {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<script src="./src/app.js"></script>
	</body>

	</html>

3. 创建 JavaScript 文件：

在项目根目录下创建一个 src 文件夹，并在其中创建一个 app.js 文件，编写你的 OpenLayers 代码：

	import 'ol/ol.css';
	import Map from 'ol/Map';
	import View from 'ol/View';
	import TileLayer from 'ol/layer/Tile';
	import OSM from 'ol/source/OSM';

	const map = new Map({
	target: 'map',
	layers: [
	new TileLayer({
	source: new OSM()
	})
	],
	view: new View({
	center: [0, 0],
	zoom: 2
	})
	});

4. 运行 Parcel：

在命令行中运行以下命令，Parcel 会自动启动一个本地开发服务器，并在默认浏览器中打开你的应用：

npx parcel index.html

这个命令告诉 Parcel 使用 index.html 作为入口文件来构建你的应用。

5. 查看应用：

Parcel 会自动为你的项目进行打包和构建，然后在浏览器中显示你的 OpenLayers 应用。

通过使用 Parcel，你能够在几分钟内快速搭建一个简单的开发环境，无需手动配置复杂的工具链。

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