先放图

弱弱的说一句,我真的错了。不该用parcel~

前几天,尤大开直播说了造轮子的好处,主要还是锻炼自己。所以自己还是义无反顾地把这个项目搭建工具慢慢地v z G 8 * I i ] {造起来。

这次升级

这次版本是v1.0.7 # ^ ^ l s H L I5。

我们来看下这次版本的预装依赖,我们的项目UI框架预先安装上了ant-y a e j L Adesig[ b n ^ { ^ Z v In-vue@2.1.4,默认是按需加载。为什么这次是引入它,而不是element-plus,主要是考虑到parcel2针对babel.config.js这样的JS文件对组件样式引入实d R J @ m )时检测不是很好,你9 { ( P ) I @ e必须手动刷新才能获取最新状态。另外,parcel2官方推荐使用json格式的,还有element-o 9 O s \ xplus按需引入时用到customStyleName: (name) => {})方法,在json文件没法实现。所以,最终选用了ant-design-vue@2.% G \1.4。为了搭配按需引入功能,我们引入了w r 9 $ n S _babel-plugin-import。

最后,我z & T y们这次又引入了最新版本vue@3.0.11,与之相对应@vue/compiler-sfc@3.0.11。

好了,我们来看下我们引入的全部依赖。

  1. "devDependencies":{
  2. "@Y a ` B $ N O F kparcel/bai k 8bel-plugin-transform-runtime":"^2.0.0-nightly.1823",
  3. "@parcel/transformer-image":"2.0.5 ` I R b0-beta.2",
  4. "@parcel/transformer-sass":"2.0.0-beta.2",, * l y # L
  5. "@parcel/transformer-vue":"2.0.0-beta.2",I { 1 ; O G m
  6. "# c % \ * 0 x : :@vue/compiler-sfc":"^3.0.11",
  7. "babel-eslint":"^10.1.0",
  8. "babel-plug6 % Z ( } s 8in-imporK 0 ,t":"^1.13.3",
  9. "eslint":"^7.23.0",
  10. "eslint-plugin-vue":"^7.8.0",
  11. "mockjs":"^1.1.0",
  12. "parcel"8 % V ?:"^2.0.0-be& d n \ g 9 l 5ta.2",
  13. "sass":"^1.32.8"
  14. },
  15. "dependencies":{
  16. "ant-design-vue":"^2.@ I 4 m f d1.4",
  17. "axios"9 h d ) g u v X \:"^0.21.1",
  18. "vue":"^3.0.11",
  19. "vue-router":"4",
  20. "vuex":"^0 t C , \ & p4.0.0"
  21. }

同样,为parcel-vue-app而生的脚手架parcel-vue-cli这次也进行了重大更新,这次版本更新到1.0.9。

这次,做出的更新K L K r Z主要是拉取仓库后,自动对远程仓库进行重置。这样,你创建项目之后,可以自定义自己的仓库地址。

实战

搭建parcel-vue-app

安装

  1. npminstallparcel-vue-cli-g

查看版本

  1. parcel-vue-cli-v

初始化

  1. parcel-vue-cliinit<projectName>

启动项目

安装依赖

  1. npminstall

启动

  1. npmrunserve

打包

  1. npmrunbuild

仓库地址

parcel-vue-cli:

https://github.com/mi ; n @ f ,aominco. A ? Uding/parcel-vue-cli

parcel-vue-app:

https://github.com/maomincoding/parcel-vue-app

本文转载自微信公众号「前端历劫之路」,可以通过以下二维码关注。转载本文请联系Z M @ \前端历劫之路公众号。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注