🚀 快速入门

Parcel 是一个 web 应用打包工具, 与其他工具的区别在于开发者的使用体验。它利用多核处理器提供了极快的速度, 并且不需要任何配置。

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

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

在你的项目目录下创建一个 package.json 文件:

yarn init -y

或者

npm init -y

Parcel 可以使用任何类型的文件作为入口,但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入 JavaScript 主文件,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 。当文件改变时它仍然会自动重建并支持热替换,但是不会启动 web 服务。

parcel watch index.html

当你为生产环境构建时,build 模式会关闭监听并且只建立一次。请进入 生产环境 章节查看更多细节。