Parcel 是一个面向 web 的零配置构建工具。它将出色的开箱即用的开发体验与可伸缩的体系结构相结合，可以将您的项目从刚开始的阶段发展到大规模的生产应用。

它和 webpack 属于同一个工具类别，但有着不同的价值主张。

其主要特点包括：

资源捆绑（JS、css、html、图像）
零配置代码拆分
使用 babel、PostCSS 和 PostHTML 进行自动转换
热模块替换
代码诊断
开发服务器
缓存和并行处理以加快构建速度
etc

Parcel 入门

入门
Parcel 是一个Web应用程序打包器(bundler) ，与以往的开发人员使用的打包器有所不同。它利用多核处理提供极快的性能，并且你不需要进行任何配置。
首先使用 Yarn 或 npm 安装 Parcel ：
Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

使用以下命令在你的项目目录中创建一个 package.json 文件：

yarn init -y
or
npm init -y

Parcel 可以将任何类型的文件作为入口点(entry point) ，但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中，Parcel 也会为你处理，并将该引用替换为输出文件的 URL 。
接下来，创建一个 index.html 和 index.js 文件。

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

console.log("hello world");

Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持模块热替换，以便你快速开发。你只需指定入口文件即可：

parcel index.html

现在在你浏览器中打开 http://localhost:1234/ 。您也可以使用 -p <port number> 选项覆盖默认端口。
如果您没有自己的服务器，或者你的应用完全是客户端渲染的，那么请使用开发服务器。如果你有自己的服务器，您可以在 watch 模式下运行 Parcel 。这样在文件更改时，Parcel 仍然会自动重建文件，并支持模块热替换，但不启动 Web 服务器。

parcel watch index.html

Parcel资源

资源
Parcel 基于资源的。资源可以代表任何文件，但 Parcel 对 JavaScript ，CSS 和 HTML 文件等特定类型的资源有特殊的支持。Parcel 自动分析这些文件中引用的依赖关系，并将其包含到输出包(output bundle) 中。相似类型的资源被组合在一起成为相同的输出包。如果您导入不同类型的资源（例如，如果你在 JS 中导入了一个 CSS 文件），它新建一个子包，并在父级中保留一个引用。这将在下面的部分中进行举例说明。
JavaScript
Web 打包器(bundler) 最传统的文件类型是 JavaScript 。Parcel 支持 CommonJS 和 ES6 模块语法来导入文件。它还支持动态 import() 函数语法来异步加载模块，这在代码拆分部分讨论。

// 使用 CommonJS 语法导入模块
const dep = require('./path/to/dep');
// 使用 ES6 import 语法导入模块
import dep from './path/to/dep';

你还可以在 JavaScript 文件导入非 JavaScript 资源，例如 CSS ，甚至图像文件。当您导入其中一个文件时，它不像其他一些打包器(bundler) 一样内联的。相反，它及其所有依赖项被放置在一个单独的包(bundle)（例如一个 CSS 文件）中。当使用 CSS Modules 时，导出的类被放置在 JavaScript 包中。其他资源类型将导出一个 URL 到 JavaScript 包的输出文件中，所以你可以在你的代码中引用它们。

// 导入一个 CSS 文件
import './test.css';
// 通过 CSS modules 导入一个 CSS 文件
import classNames from './test.css';
// 通过URL 导入一个 image 文件 
import imageURL from './test.png';

如果你想将文件内联到 JavaScript 包中，而不是通过 URL 引用，你可以使用 Node.js 中的 fs.readFileSync api 来做到这一点。 URL 必须是静态可分析的，这意味着它不能有任何变量（除了 __dirname 和 __filename ）。

import fs from 'fs';
// 以字符串形式读取内容 
const string = fs.readFileSync(__dirname + '/test.txt', 'utf8');
// 以 缓冲区(Buffer)形式读取内容
const buffer = fs.readFileSync(__dirname + '/test.png');

CSS
CSS 资源可以在 JavaScript 或 HTML 文件导入，并且可以通过 @import 语法包含引用的依赖关系，以及通过 url() 函数引用图像，字体等。其他的 @import 的 CSS 文件被内联到同一个 CSS 包中，并且 url() 引用被重写为它们的输出文件名。所有的文件名应该是相对于当前的 CSS 文件。

/* 导入另一个 CSS 文件 */
@import './other.css';
.test {
  /* 引用一个 image 文件 */
  background: url('./images/background.png');
}

除了纯 CSS ，还支持其他编译成 CSS 语言，如 LESS ，SASS 和 Stylus ，并以相同的方式工作。
SCSS
SCSS编译需要 node-sass 模块。可以用 npm 来安装它：

npm install node-sass

一旦 node-sass 安装完成，你就可以在 JavaScript 文件中导入 SCSS 文件。

import './custom.scss'

SCSS 文件中的依赖可以使用 @import 语句。
HTML
HTML 资源通常是你提供给 Parcel 的入口文件，但也可以被 JavaScript 文件引用，例如，提供其他网页的链接。脚本，样式，媒体和其他 HTML 文件的 URL 被提取和编译，如上所述。引用被重写到 HTML 中，以便它们链接到正确的输出文件。所有的文件名应该是相对于当前的 HTML 文件。

<html>
<body>
  <!-- 引用一个 image 文件 -->
  <img src="./images/header.png">
  <a href="./other.html">Link to another page</a>
  <!-- 导入一个 JavaScript 包 -->
  <script src="./index.js"></script>
</body>
</html>

Parcel转换

转换
尽管许多打包器(bundler) 都要求你安装和配置插件来转换资源，Parcel 内置许多长江的转换和转译器，让你开箱即用。你可以使用 Babel 转换 JavaScript，CSS 使用 PostCSS ，HTML 使用 PostHTML 。当在模块中找到配置文件（例如 .babelrc ，.postcssrc ）时， Parcel 会自动运行这些转换。
这甚至可以在第三方 node_modules 中工作：如果配置文件是作为包的一部分发布的，转换会自动打开，且仅适用于该模块。由于只处理需要转换的模块，因此可以快速打包。这也意味着您不需要手动配置转换来包含和排除某些文件，或者知道第三方代码是如何构建的，以便在你的应用程序中使用它。
Babel
Babel 是一个流行的 JavaScript 转译器，拥有大量的插件生态系统。在 Parcel 中使用 Babel 的方式与其单独使用或与其他打包器配合使用的方式相同。
在你的应用程序中安装预设和插件：

yarn add babel-preset-env

然后，创建一个 .babelrc 文件：

{
  "presets": ["env"]
}

PostCSS
PostCSS 是一个用插件转换 CSS 的工具，比如 autoprefixer, cssnext, 和 CSS Modules。您可以使用以下名称之一创建配置文件，从而使 Parcel 使用 PostCSS 配置： .postcssrc (JSON), .postcssrc.js, 或者 postcss.config.js.
在你的应用程序中安装插件：

yarn add postcss-modules autoprefixer

然后，创建一个 .postcssrc 文件：

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

插件指定在 plugins 对象的 key 中，并选项定义使用对象值。如果插件没有选项，只需将其设置为 true 即可。
Autoprefixer ， cssnext 和其他工具的目标浏览器可以在 .browserslistrc 文件中指定：

> 1%
last 2 versions

CSS Modules 的启用方式稍有不同，在顶级 modules key 上使用。这是因为 Parcel 需要对 CSS Modules 有特殊的支持，因为它们也会导出一个对象，包含到 JavaScript 包中。请注意，你仍然需要在你的项目中安装 postcss-modules 。
PostHTML
PostHTML 是一个用插件转换 HTML 的工具。您可以使用以下名称之一创建配置文件，从而使 Parcel 使用 PostHTML 配置：.posthtmlrc (JSON), posthtmlrc.js, 或者 posthtml.config.js.
在你的应用程序中安装插件：

yarn add posthtml-img-autosize

然后，创建一个 .posthtmlrc 文件：

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}

插件指定在 plugins 对象的 key 中，并选项定义使用对象值。如果插件没有选项，只需将其设置为 true 即可。
TypeScript
TypeScript 是 JavaScript 类型的超集，可以编译成普通的JavaScript，它也支持现代的 ES2015+ 特性。无需任何额外的配置即可转换 TypeScript 。

<!-- index.html -->
<html>
<body>
  <script src="./index.ts"></script>
</body>
</html>
// index.ts
import message from "./message";
console.log(message);
// message.ts
export default "Hello, world";

代码拆封（Code Splitting）

代码拆封（Code Splitting）

Parcel 支持零配置代码拆分，开箱即用。这使您可以将你的应用程序代码拆分为可以按需加载的独立包，这意味着更小的初始包大小和更快的加载时间。当用户在应用程序中浏览模块并需要加载时，Parcel 会自动负责按需加载子包。
代码拆分是通过使用动态的import() 函数的语法提案来控制的，它的工作方式与普通的 import 语句或 require 函数类似，但返回一个 Promise 。这意味着模块是异步加载的。
以下示例显示如何使用动态导入来按需加载应用程序的子页面。

// pages/about.js
export function render() {
  // 渲染页面
}
import('./pages/about').then(function (page) {
  // 渲染页面
  page.render();
});

由于 import() 返回一个 Promise ，你也可以使用 async/await 语法。你可能需要配置 Babel 来传输语法，直到浏览器得到更广泛的支持。

const page = await import('./pages/about');
// 渲染页面
page.default();

动态导入也会在 Parcel 中延迟加载，所以你仍然可以将所有的 import() 调用放在文件的顶部，并且在使用子包之前，它们将不会被加载。以下示例显示如何动态地延迟加载应用程序的子页面。

// 设置页面名称到动态导入映射。
// 这些页面都不会被加载，直到使用前。
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
};
async function renderPage(name) {
  // 延迟加载请求页面。
  const page = await pages[name];
  return page.default();
}

注意: 如果你想在本机不支持的浏览器中使用 async/await ，请记得在你的应用中引入 babel-polyfill 或在库中引入 babel-runtime +

babel-plugin-transform-runtime 。
yarn add babel-polyfill
import "babel-polyfill";
import "./app";

模块热替换（Hot Module Replacement）

模块热替换（Hot Module Replacement）
模块热替换（HMR）通过在运行时自动更新浏览器中的模块，而不需要刷新整个页面来改进开发体验。这意味着应用程序状态可以在小的更改时保留。 Parcel 的 HMR 实现支持开箱即用的JavaScript 和 CSS 资源。在生产模式下打包时，HMR 自动被禁用。
在保存文件时，Parcel 会重建所更改的内容，并将更新发送到包含新代码的任何正在运行的客户端。新的代码会替换旧版本，并与所有的父级资源一起重新计算。你可以使用 module.hot API 挂接到这个过程中，这个API可以在一个模块即将被丢弃时或者当一个新版本进入时通知你的代码。像 react-hot-loader 这样的项目可以帮助你完成该过程，并通过 Parcel 开箱即用。
有两种已知的方法：module.hot.accept 和 module.hot.dispose 。你可以在module.hot.accept中使用回调函数，该函数在模块或其任何依赖项被更新时执行。当该模块即将被替换时，module.hot.dispose 回调函数会被调用。

if (module.hot) {
  module.hot.dispose(function () {
    // 模块即将被替换时
  });
  module.hot.accept(function () {
    // 模块或其依赖项之一刚刚更新时
  });
}

安全写入
一些文本编辑器和 IDE 有一个名为 safe write（安全写入）的功能，这基本上可以防止数据丢失，通过获取文件的副本并在保存时对其进行重命名。
使用模块热加载（HMR）时，此功能会阻止文件更新的自动检测，要禁用 safe write（安全写入），请使用下面提供的选项：
    Sublime Text 3 将 atomic_save： "false" 添加到你的用户偏好设置中。
    IntelliJ 在首选项中使用搜索来查找 "safe write" 并禁用它。 *Vim 将 :set backupcopy=yes 添加到你的设置。
    WebStorm 取消选中首选项 > 外观和行为 > 系统设置中的 "safe write" 。

生产环境

生产环境
当需要打包应用程序用于生产环境时，可以使用 Parcel 的生产模式。

parcel build entry.js

这将禁用监听(watch) 模式和模块热更换，所以它只会构建一次。它还会开启 minifier 用于压缩输出包文件的大小。Parcel使用的 minifiers 包括用于 JavaScript 的 uglify-es，用于 CSS 的 cssnano，和用于 HTML 的 htmlnano。
启用生产模式还需要设置 NODE_ENV = production 环境变量。像 React 这样的大型库有开发调试功能，通过设置这个环境变量来禁用调试功能，从而使生产的构建更小更快。
选项
设置输出目录
默认: "dist"

parcel build entry.js --out-dir build/output
或者
parcel build entry.js -d build/output

root
- build
- - output
- - - entry.js

设置要提供服务的公共 URL
默认: --out-dir option

parcel build entry.js --public-url ./

将输出:

<link rel="stylesheet" type="text/css" href="1a2b3c4d.css">
or
<script src="e5f6g7h8.js"></script>

禁用压缩
默认: minification enabled

parcel build entry.js --no-minify

禁用文件系统缓存
默认: cache enabled

parcel build entry.js --no-cache

配置(Recipes)

配置(Recipes)
React
首先需要安装 React 的依赖关系。
博客文章

npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-react

或者如果你已经安装了可选的 Yarn 包管理器

yarn add react
yarn add react-dom
yarn add --dev parcel-bundler
yarn add --dev babel-preset-env
yarn add --dev babel-preset-react

然后确保以下 Babel 配置存在。

 // .babelrc
{
  "presets": ["env", "react"]
}
添加 start 脚本到 package.json
// package.json
"scripts": {
  "start": "parcel index.html"
}

Preact
首先，我们需要安装 Preact 的依赖关系。

npm install --save preact
npm install --save preact-compat
npm install --save-dev parcel-bundler
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-preact

或者如果你已经安装了可选的 Yarn 包管理器

yarn add preact
yarn add preact-compat
yarn add --dev parcel-bundler
yarn add --dev babel-preset-env
yarn add --dev babel-preset-preact

然后确保以下 Babel 配置存在。

// .babelrc
{
  "presets": ["env", "preact"]
}

添加 start 脚本到 package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

链接: https://www.fly63.com/article/detial/12525

Parcel 的入门和使用