【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

前言

一周时间，没见了，大家有没有想我啊！哈哈！我知道肯定会有的。言归正传，我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么，今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么？怎么以前没有听说过。有这样的疑问其实并不奇怪，因为这个构建工具是我自己开发的。你可能会这样问：“你自己开发的？这么厉害吗”？是的，豆哥其实就这么厉害。开玩笑啦！其实没有你想得那么厉害。都是搬砖人，主要看思路。好，不扯了！本篇文章我将带大家如何从0到1开发一款极快，零配置的Vue3项目构建工具（parcel-vue-cli）。名字就这么记着吧！
实战

既然，从0开始，那么我们肯定需要先了解parcel 2是什么东东？
一、介绍Parcel 2

了解Parcel 2之前呢，你得知道它上一个版本Parcel 1是啥。这是官方网址：https://parceljs.org/
官方是这样介绍它的：

Blazing fast, zero configuration web application bundler

极速、零配置的web应用捆绑包。
我们这里就简单地介绍下它的几个特性。

Parcel使用工作进程来启用多核编译，并且有一个文件系统缓存，即使在重新启动后也可以快速重建。
Parcel提供了对JS、CSS、HTML、文件资产等的现成支持—不需要插件。
当需要时，代码会使用Babel、postss和posthml自动转换，甚至是node_modules。
使用动态import()语法，Parcel拆分输出包，以便只在初始加载时加载所需的内容。
在开发过程中进行更改时，Parcel会自动更新浏览器中的模块，无需配置。
Parcel在遇到错误时打印语法高亮显示的代码帧，以帮助您确定问题。

 

看完这些特性之后，是不是感觉跟Vite很相似。https://parceljs.org/getting_started.html这是文档地址，如果还有小伙伴没有接触Parcel的，那么推荐你赶快试试去。今天，我们就不过多地介绍Parcel 1了，主要是为了抛砖引玉，为了咱的主角Parcel 2。Parcel 1都这么强大了，那么Parcel 2不就更厉害了吗？别急！听我细细道来。

如果你在找Parcel 2的官网怎么也没找到，那就对了。https://github.com/parcel-bundler/parcel/tree/v2，你可以打开Parcel 2的github网址。我们滑到Features一栏，你会发现介绍的跟Parcel 1一样，我去~ 还能再懒点吗？整出来一个2，特性介绍还跟1一模一样。莫着急，我们往下看会看到一段文字：

Below is the design document that was created before work on the implementation of Parcel 2 started and some sections are outdated. The actual (somewhat complete) documentation for Parcel 2 is available here: https://v2.parceljs.org/.

以下是在开始实施Parcel 2的工作之前创建的设计文档，并且某些部分已经过时。 此处提供了包裹2的实际（有些完整）文档：https://v2.parceljs.org/.

 

踏破特写无觅处，得来全不费工夫。原来官网在这里，我们毫不留情地打开了它。

Parcel是所有代码的编译器，无论使用哪种语言或工具链。Parcel会获取您的所有文件和依赖项，进行转换，然后将它们合并到较小的一组输出文件中，这些文件可用于运行代码。Parcel开箱即用地支持多种不同的语言和文件类型，从HTML，CSS和JavaScript等网络技术到Rust等低级语言，以及任何可编译为WebAssembly（WASM）的东西，再到图像，字体，视频，和更多。包裹使您的代码可移植。您可以为不同的环境，服务器的Web或应用程序构建代码。您甚至可以一次建立多个目标，并在进行更改时实时更新它们。包裹快速且可预测。它在worker内部并行隔离地编译所有文件，并在运行时将所有文件缓存。缓存在计算机之间是稳定的，并且仅受项目中文件和配置的影响（除非您要传递特定的环境变量）。

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118720641