返回

零配置前端工具包 Parcel 上手体验

前端

前言

最近需要做一个纯静态网站，由于工作量比较少，功能又不复杂，使用 webpack 似乎有些大材小用，而且早就对 parcel 种草，所以这次决定试用一下号称零配置的 parcel 。 根据官网文档很快就安装好了。值得点赞的是，在引入 less 文件的时候，parcel 自动检测到了 less 文件，并自动完成了编译。这让我对 parcel 的印象很好。

Parcel 的安装

parcel 的安装非常简单，可以使用 npm 或 yarn 安装：

npm install parcel-bundler -g

或者

yarn global add parcel-bundler

Parcel 的基本使用

parcel 的基本使用也非常简单，只需要在项目根目录下创建一个名为 package.json 的文件，并在其中添加如下内容：

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html"
  }
}

然后在项目根目录下创建一个名为 index.html 的文件，并在其中添加如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

最后，在项目根目录下运行 npm start 或 yarn start 命令，parcel 就会自动编译 index.html 文件并启动一个开发服务器，可以在浏览器中访问该服务器查看编译后的结果。

Parcel 与 Webpack 的对比

parcel 和 webpack 都是前端构建工具，但 parcel 比 webpack 更加轻量级，并且无需任何配置即可使用。parcel 还支持更多种类的文件类型，包括 JavaScript、TypeScript、CSS、LESS、SASS、React、Vue 和 Angular 等。

webpack 是一个功能更强大的前端构建工具，可以实现更复杂的构建任务，但是它的配置也更加复杂。parcel 更适合新手或小型项目，而 webpack 更适合大型项目或有复杂构建需求的项目。

总结

parcel 是一个非常易用的前端构建工具，非常适合新手或小型项目。parcel 可以自动检测文件类型并进行编译，无需任何配置即可使用。parcel 还支持多种文件类型，包括 JavaScript、TypeScript、CSS、LESS、SASS、React、Vue 和 Angular 等。

如果你正在寻找一款轻量级且易用的前端构建工具，那么 parcel 是一个非常不错的选择。