编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

开箱即用的web打包工具Parcel,了解一下?

wxchong 2024-06-27 01:31:06 开源技术 17 ℃ 0 评论

Parcel号称极速零配置Web应用打包工具,相比于webpack的复杂性,Parcel确实为我们省去了很多配置。使用过facebook/create-react-app的同学应该会发现,creat-react-app也简化了配置,其包含react-scripts包,这个包做的事正与Parcel类似:将所有的打包配置统筹、封装。在上一篇有关async/await的文章中有提到Parcel,请原谅我没有按顺序出牌。

1 Parcel基本用法

1.1 安装Parcel

全局安装Parcel:

安装Parcel

1.2 创建、运行项目

创建文件夹,并在文件夹下新建入口html和js文件,html引入入口js文件。

index.html

index.js

在文件夹下初始化项目:

初始化项目

启动服务,开始开发:

启动服务

2 项目迁移

我们现在可能更关心旧webpack项目可不可以用Parcel打包。我们现在进行尝试一下。

2.1 改造vue-cli webpack模板项目

我们首先使用vue-cli创建一个项目:

创建vue-cli webpack项目

首先进入项目运行一下npm run dev,检查是否能运行成功,OK!运行成功。然后我们直接运行:

parcel index.html

DANG! DANG!

直接运行Parcel

emmmmm…

好像没有将main.js引入html文件。改!

import路径错误

修改引用路径。重启服务,出现错误:

vue包不完整

由于我们在App.vue中使用了template函数,而

mport Vue from 'vue'

默认引用的运行时态版(不支持template函数),所以需要改用vue完整版。修改main.js和router/index.js文件中vue的引用。

vue使用完整版

再来运行一次parcel index.html便成功了,可以正常开发了。

3 小缺陷

Parcel目前支持CommonJS 和 ES6 两种模块语法,所以,如果你在index.html页面引入了项目中非上述两种模块语法开发的js,那么可能会出现意外情况。如果还是想引入非CommonJS和ES6模块语法开发的js,目前可以有两种解决方法:

  • 如果有源码,则改造代码

  • 没有源码,并且还是压缩的,将其放在服务器上,html通过域名引用

总结

总体而言,Parcel确实比webpack要简化很多,几乎是开箱即用。对于没有特殊要求的项目,推荐使用。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表