零配置构建工具parcel

前端项目工程上有很多构建工具，比如 webpack和 vite ，它们都有各自的优点和缺点。但是它们也有共同点：快速启动项目，可自定义配置，开发者可以自定义优化。同时这也增加了开发者的学习成本。需要了解构建工具的api，运作流程，插件工作原理等等。可是开发者只想快速创建一个项目工做一些简单的项目 demo 时， webpack和 vite 就觉得有点过于沉重。这是我推荐一个零配置(极少配置)构建工具 parcel 。

什么是parcel

parcel是一个包含开发服务器的构建工具，像 webpack 添加了 dev-server 插件一样，可以将资源打包运行，支持热更新。 parcel支持原生 js项目、 react 项目、 vue 项目创建，并且只需要极少的配置就可以完成 typescript项目适配。

如何一个parcel项目

创建一个空文件夹，并在此文件创建终端

初始化项目:npm init-y

安装parcel:npm install--save-dev parcel

根目录创建index.html、main.js、style.css文件，并在index.html写入以下内容

Document

这是一个parcel项目

style.css文件写入以下内容

*{

margin: 0;

}

h1 {

color: red;

}

在package.json写入命令

{

"scripts": {

"start": "parcel ./index.html",

"build": "parcel build ./index.html"

}

}

运行项目:npm run start，在浏览器输入:http://localhost:1234，即可看见这是一个parcel项目的红色文字。

parcel项目，运行和打包都会输出到根目录上的dist文件夹。

修改端口，在package.json文件修改start命令

{

"scripts": {

"start": "parcel ./index.html --port 8080",

}

}

一个简单的 parcel 项目就搭建完成了，不需要像 webpack那样有一个 config文件，配置入口、出口、 loader等等打包配置。只需要在 index.html 加入 link和 script 标签， parcel会自动查看对应的依赖代码打包到资源中。

配置typescript项目

需要将后缀为.js文件改为.ts

修改入口文件index.html的script的src文件为.ts

根目录上创建tsconfig.json文件，并写入以下内容。（可以根据项目需要添加ts配置）

{

"compilerOptions": {

"isolatedModules": true // 处理 .ts文件没有export 和import关键字的报错

}

}

运行项目：npm run start

typescript的配置也是很简单，还可以使用 ts原本的配置，保持原有的扩展性。如增加了 tsconfig 配置而运行失败，可以将 parcel 默认的 ts编译器改成 tsc或 babel，详情请访问此处。

parcel有什么缺点呢

不支持SourceMap：在开发模式下，Parcel也不会输出SourceMap，目前只能去调试可读性极低的代码；

不支持剔除无效代码(TreeShaking)：很多时候我们只用到了库中的一个函数，结果Parcel把整个库都打包了进来；

一些依赖会让Parcel出错：当你的项目依赖了一些Npm上的模块时，有些Npm模块会让Parcel运行错误；

只建议parcel开发demo，或用于尝试实现某个功能的思路验证。用于生产上还是要webpack、vite等成熟工具。

参考文章

Parcel

Parcel Vs Webpack