关于parcel 这一款web应用级打包工具,具有很好发展前景,相对于webpack和browserify 的成熟期的打包工程化的打包工具来说,是有那么一点稚嫩,但是未来前景很好,现在有很多人,在做中小型项目都在使用parcel 作为首选工具;
为什么要用 Parcel 作为项目的打包工具?我只能说,你用了肯定喜欢,最新版本实现了ts和scss和less的编译,不用担心在配置很多插件package.json文件一堆东西配置;同时,它对 yarn 的生态具有很强的耦合性,是很好的工具支持;(前期用npm ,作者后期换成了yarn 安装很执行插件的速度明显快与npm的命令;ps:所以你的选择,你做主。。。)
还有一堆关于parcel 的运行机制和打包机制,有兴趣可以拉取官网的代码研究一下;
parcel的官网地址:https://parceljs.org/ parcel的git仓库地址:https://github.com/parcel-bundler/parcel ;
估计有小伙伴着急使用,没有事件研究原生代码。鄙人不才,在网上找到了一篇关于博主自己需要的插件没有,自己撸了一个parcel的插件;【
ps:关于博主(东都花神)的parcel博客地址:https://blog.****.net/qq_33988065/article/details/79441236 ;博主有贴出自己撸的parcel插件项目地址:项目地址: parcel-plugin-zip;
】
我尝试了parcel +vue 的搭建,体验效果还不错;写了一个小demo;
[ps:记录下自己所用的命令:
1.需要有一个工作项目文件夹(新建文件parcel_vue或者自定义){ mkdir parcel_vue }
2.需要初始化项目:(yarn init 或者 yarn init -y ps:加上-y 是代表跳过询问;也可以使用npm init 等命令)
3.安装项目需要生态:VUE「ps: 命令:yarn add vue --save 或者 yarn add vue -S 」
4.安装parcel 开发依赖:parcel-bundler 「ps : yarn add parcel-bundler --dev 或者 yarn add parcel-bundler -D 」
]
下面贴出我package.json 文件关于配置
package.json 配置文件
项目的目录结构:
目录 parcel_vue
关于配置时候报错问题:
PS:1-1.1 报的错是说没有找到相应模板,那么就是关于vue渲染页面的render的问题;可以相应修改main.js 内部的挂载问题;做出如下修改:
main.js文件
1-1.2:在打包后点击页面没有东西。控制台console 报错:显示未找到这个文件可以做出如下修改:
package.json的build 命令修改城上述的图标上的配置;同时也修改一下index.html 主入口文件的内部链接main.js的script的src 的链接改成绝对地址;
index.html文件
1-1.3:还有一些关于什么无法显示的问题,自己研究一下官网,我查询时候都是18年的资料的东西parcel的开发在高速发展,所以不断完善,从最新版本兼容react和vue还有p***的来看未来前景还是很广的,所以有可能成为主流打包,看各位看官怎么想;(Ps:作者在搞ts时候vscode报错说ts语法问,暂时还未解决,所以就不说 —+ ts 的vue了,但是ts语法最新的parcel已经支持,所以只是作者没有搞明白而已,如果有小伙伴知道可以说一下;)
如果有什么疑问了;或者意见的可以发我邮箱:[email protected] 登录邮箱:https://mail.163.com/
为了各位看官有打赏的通道,所以开通了一下微信:
有钱捧个钱场——有人的捧个人场
欲望_是人类进步的动力源泉;谁说的忘了,但是小编,希望你在这个欲望弥漫的城市里,不迷失,大步向...