其他分享
首页 > 其他分享> > 【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具

【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内部并行隔离地编译所有文件,并在运行时将所有文件缓存。缓存在计算机之间是稳定的,并且仅受项目中文件和配置的影响(除非您要传递特定的环境变量)。

更多请见:http://www.mark-to-win.com/tutorial/50735.html

标签:Vue,Parcel,parceljs,https,Vue3,org,parcel
来源: https://blog.csdn.net/weixin_44519496/article/details/118720641