Parcel

前不久，我整理了文档给大家，是说的webpack 。今天介绍和它具有相同功能Parcel，但是不需要配置？不需要配置这也是它的标榜。

Parcel的好处是什么？

更快的构建速度 ：Parcel比Webpack 、Rollup 和Browserify更快；

这是基于Parcel的速度：

屏幕快照 2018-01-10 上午9.25.02.png

这是它的好处：

屏幕快照 2018-01-10 上午9.35.39.png

Parcel是如何运作的？

Parcel 将资源树转换成文件束树。许多其它的打包工具基本上是基于 JavaScript 资源，还有附加在其上的其它格式的资源。例如，在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的，它能按你所期待的方式那样与任意类型的资源工作，且毋须配置。Parcel 的打包流程共有三个步骤。

1、构建资源树

Parcel 接受单个入口资源作为输入，可以是任意类型：一个 JS 文件、HTML、CSS 和图片等等。有许多不同的资源类型在 Parcel 中被定义，它知道如何去处理特定的文件类型。资源会被解析，资源的依赖会被提取，资源会被转换成最终编译好的形态。此过程创建了一个资源树。

2、构建文件束树

一旦资源树被构建好，资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束，然后动态的 import() 会被创建成子文件束，这引发了代码的拆分。

当不同类型的文件资源被引入，兄弟文件束就会被创建。例如你在 JavaScript 中引入了 CSS 文件，那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。

如果资源被多于一个文件束引用，它会被提升到文件束树中最近的公共祖先中，这样该资源就不会被多次打包

3、打包

在文件束树被构建之后，每个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来，生成到最终被浏览器加载的文件中。

什么场景下使用呢？

注：webpack依然非常棒，有些场景下它仍然会更快一些

当然这也完全取决于你，但是我个人会在以下场景中使用不同的打包器：

Parcel：小型到中型规模的项目
Webpack：大型以及企业级规模的项目
Rollup：用于NPM包

那么让我们使用吧

首先通过Yarn或者npm 安装Parcel：

yarn global add parcel-bundler

or

npm install -g parcel-bundler

在你正在使用的项目目录下创建一个package.json文件：

yarn init -y

or

npm init -y

Parcel 可以使用任何类型的文件作为入口

但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。
接下来，创建一个 index.html 和 index.js 文件。

console.log("hello world");

Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器，而且为了实现快速开发，该开发服务器476支持热模块替换。只需要在入口文件指出：

parcel index.html

现在在浏览器中打开 http://localhost:1234/。你也可以使用 -p 选项覆盖默认的端口。如果没有自己的服务器可使用开发服务器，或者你的应用程序完全由客户端呈现。如果有自己的服务器，你可以在watch 模式下运行 Parcel 。当文件改变它仍然会自动重新构建并支持热替换，但是不会启动 web 服务

parcel watch index.html

当你准备在生产模式下创建，build 模式会关闭监听并且只建立一次。请查阅 Production 查看更多细节。

HMR

又叫热模块更新。在运行时自动更新浏览器中的模块优化开发体验，无需刷新整个页面。这意味着在您代码小幅更改时可以保留应用程序的状态。Parcel 的 HMR 实现支持开箱即用的 JavaScript 和 CSS 资源。

HMR 构建在生产模式下时自动禁用。

有两种已知方法：module.hot.accept 和 module.hot.dispose。你可以调用module.hot.accept并赋予一个回调函数，该函数会在模块或其他依赖项被更新时执行。当该模块即将被替换时，module.hot.dispose回调函数会被调用。

if (module.hot) {
  module.hot.dispose(function () {
    // 模块即将被替换时
  });

  module.hot.accept(function () {
    // 模块或其依赖项之一刚刚更新时
  });
}