开发

Parcel 包括一个开箱即用的开发服务器,支持热重载、HTTPS、API 代理等。

Dev server

#

Parcel 的内置开发服务器会在您运行默认命令 parcel 时自动启动,该命令是 parcel serve 的缩写。 默认情况下,他启动在 http://localhost:1234. 如果端口 1234 已在使用中,则将使用备用端口。Parcel 启动后,开发服务器正在监听的位置将打印到终端。

开发服务器支持多个选项,您可以通过 CLI 选项指定:

热重载

#

当您更改代码时,Parcel 会自动重建更改的文件并在浏览器中更新您的应用程序。默认情况下,Parcel 会完全重新加载页面,但在某些情况下,它可能会执行热模块更换 (HMR)。HMR 通过在运行时更新浏览器中的模块来改善开发体验,而无需刷新整个页面。这意味着当您更改代码中的小事情时,可以保留应用程序状态。

CSS 更改通过 HMR 自动应用,无需重新加载页面。在使用内置 HMR 支持的框架时也是如此,例如 React(通过快速刷新)和 Vue。

如果您不使用框架,则可以使用 module.hot API 选择加入 HMR。这将防止页面重新加载,而是就地应用更新。module.hot 仅在开发中可用,因此您需要在使用之前检查它是否存在。

if (module.hot) {
module.hot.accept();
}

HMR 的工作原理是替换模块的代码,然后重新评估它以及它的所有父模块。如果你需要自定义这个过程,你可以使用 module.hot.acceptmodule.hot.dispose 方法来挂钩它。这些使您可以在新版本的模块中保存和恢复状态。

module.hot.dispose 接受一个回调,该回调在该模块即将被替换时调用。使用它来保存任何状态以在提供的对象中恢复模块的新版本 data ,或清理将在新版本中重新创建的计时器等内容。

module.hot.accept 接受一个回调函数,该函数在该模块或其任何依赖项更新时执行。您可以使用它来使用存储在 module.hot.data.

if (module.hot) {
module.hot.dispose(function (data) {
// module is about to be replaced.
// You can save data that should be accessible to the new asset in `data`
data.updated = Date.now();
});

module.hot.accept(function (getParents) {
// module or one of its dependencies was just updated.
// data stored in `dispose` is available in `module.hot.data`
let { updated } = module.hot.data;
});
}

开发目标

#

使用开发服务器时,一次只能构建一个目标。默认情况下,Parcel 使用支持现代浏览器的开发目标。这意味着旧浏览器的现代 JavaScript 语法转换被禁用。

如果您需要在旧版浏览器中进行测试,您可以提供 --target CLI 选项来选择要构建的目标。例如,要构建 package.json 中定义的“legacy”目标,请使用 --target legacy。如果您没有定义任何显式目标,并且 browserslist 在您的 package.json 中只有一个,您可以将隐式默认目标与 --target default。这将导致您的源代码被编译,就像它在生产中一样。

有关详细信息,请参阅 Targets 文档。

懒加载模式

#

在开发中,在开发服务器启动之前等待整个应用程序构建可能会令人沮丧。在处理具有许多页面的大型应用程序时尤其如此。如果您只开发一项功能,则无需等待所有其他功能构建完成,除非您导航到它们。

您可以使用 --lazy CLI 标志告诉 Parcel 将构建文件推迟到浏览器中请求它们之前,这可以显着减少开发构建时间。服务器启动很快,当您第一次导航到某个页面时,Parcel 仅构建该页面所需的文件。当您导航到另一个页面时,该页面将按需构建。如果您导航回之前构建的页面,它会立即加载。

parcel 'pages/*.html' --lazy

这也适用于动态 import(),而不仅仅是单独的某个入口。因此,如果您的页面具有动态加载的功能,则该功能在被激活之前不会被构建。当它被请求时,Parcel 也会急切地构建所有依赖项,而无需等待它们被请求。

缓存

#

Parcel 将它构建的所有内容缓存到磁盘。如果您重新启动开发服务器,Parcel 将仅重建自上次运行以来已更改的文件。Parcel 会自动跟踪构建中涉及的所有文件、配置、插件和开发依赖项,并在发生更改时精细地使缓存无效。例如,如果您更改配置文件,所有依赖该配置的源文件都将重新构建。

默认情况下,缓存存储在项目内的文件夹 .parcel-cache 中。您应该将此文件夹添加到您的 .gitignore (或其他的配置)中,以便它不会在您的存储库中提交。您还可以使用 --cache-dir CLI 选项覆盖缓存的位置。

也可以使用标志 --no-cache 禁用缓存。请注意,这只会禁用从缓存中读取.parcel-cache-仍将创建一个文件夹。

HTTPS

#

有时,您可能需要在开发过程中使用 HTTPS。例如,您可能需要使用某个主机名进行身份验证 cookie,或调试混合内容问题。Parcel 的开发服务器支持开箱即用的 HTTPS。您可以使用自动生成的证书,也可以提供自己的证书。

要使用自动生成的自签名证书,请使用 --https CLI 标志。首次加载页面时,您可能需要在浏览器中手动信任此证书。

parcel src/index.html --https

要使用自定义证书,您需要使用 --cert--key CLI 选项分别指定证书文件和私钥。

parcel src/index.html --cert certificate.cert --key private.key

API 代理

#

为了在开发 Web 应用程序时更好地模拟实际生产环境,您可以在 .proxyrc.json.proxyrc.proxyrc.js 文件中指定应该代理到另一台服务器(例如您的真实 API 服务器或本地测试服务器)的路径。

.proxyrc / .proxyrc.json

#

在此 JSON 文件中,您指定一个对象,其中每个键都是匹配 URL 的模式,值是 http-proxy-middleware对象:

.proxyrc:
{
"/api": {
"target": "http://localhost:8000/",
"pathRewrite": {
"^/api": ""
}
}
}

此示例将使 http://localhost:1234/api/endpoint 被代理到 http://localhost:8000/endpoint.

.proxyrc.js

#

对于更复杂的配置, .proxyrc.js 文件允许您附加任何与 connect兼容的中间件。首先,确保您的项目安装了 http-proxy-middleware。此示例具有与上述 .proxyrc 相同的功能 。

.proxyrc.js:
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://localhost:8000/",
pathRewrite: {
"^/api": "",
},
})
);
};

文件监听

#

为了支持最佳的缓存和开发体验,Parcel 使用了一个用 C++ 编写的非常快的观察器,它集成了每个操作系统的低级文件观察功能。使用这个观察者 Parcel 观察项目根目录中的每个文件(包括所有 node_modules)。根据这些文件中的事件和元数据,Parcel 确定需要重建哪些文件。

文件监听的一些问题

#
安全写入(safe write)
#

一些文本编辑器和 IDE 具有称为“安全写入(safe write)”的功能,通过获取文件副本并在保存时重命名它来防止数据丢失。但是,此功能可以防止自动检测文件更新。

要禁用安全写入,请使用以下提供的选项:

Linux: 设备上没有剩余空间
#

根据项目的大小和操作系统的观察者限制,在 Linux 上运行 Parcel 时可能会弹出此错误。要解决此问题,请将 sysctl 的配置更改为 fs.inotifymax_user_watches 具有更高的值.

您可以通过添加或更改 /etc/sysctl.conf: 文件的以下行来执行此操作

fs.inotify.max_queued_events = 16384
fs.inotify.max_user_instances = 128
fs.inotify.max_user_watches = 16384

如果此错误仍然存 ​​ 在,您可以尝试进一步增加值。

使用 Dropbox、Google Drive 或其他云存储解决方案
#

最好不要将 Parcel 项目放在使用 Dropbox 或 Google Drive 等同步到云的文件夹中。这些解决方案会创建大量文件系统事件,这些事件可能会干扰我们的观察程序并导致不必要的重建。

自动安装

#

当您使用默认不包含的语言或插件时,Parcel 会自动为您将必要的依赖项安装到您的项目中。例如,如果您包含一个.sass 文件,Parcel 将安装该 @parcel/transformer-sass 插件。发生这种情况时,您将在终端中看到一条消息,并且新的依赖项将添加到您的 package.jsondevDependencies 中。

Parcel 会根据锁定文件自动检测您在项目中使用的包管理器。例如,如果 yarn.lock 存在,则将用 Yarn 安装包。如果未找到锁定文件,则根据系统上安装的内容选择包管理器。当前支持以下包管理器,按优先级顺序列出:

默认情况下,自动安装仅在开发期间发生。在生产构建期间,如果缺少依赖项,则构建将失败。您还可以在开发期间使用 --no-autoinstall CLI 标志禁用自动安装。