「中高级前端进阶」从零开始手写一个 vue-cli 脚手架
关注我的小伙伴应该知道,我之前写过一篇脚手架相关的文章,在掘金收获了近一千个赞,被前端大全和奇舞周刊公众号转载。
可以说自定义脚手架是每一个中高级前端都应该具备的能力。
1. 脚手架带来的便利
在现在前端全面拥抱 MVVM 框架的时代,初学者刚学 Vue/React的时候,很多教程都会告诉我们先使用脚手架创建一个项目原型:
不用我们进行多余的配置,就可以直接运行,方便快捷。
使用脚手架可以给我们带来很多便利:
减少重复性的工作,不需要复制其他项目再删除无关代码,或者从零创建一个项目和文件;
可以根据交互动态生成特定的项目结构和配置文件;
多人协作更为方便,不需要把文件传来传去;
2. 自定义脚手架的诞生
基于以上的优点,当前大部分前端团队在前端工程化流程中,都会加入脚手架模块。那么脚手架到底是什么呢,虽然不同团队对脚手架工具在前端工作流中所扮演角色的理解不同,但是对于脚手架的定位是一致的:一个用来创建前端项目初始模板的命令行工具。
这是一个简单的定义,但是正如之前所言,不同团队对脚手架的理解和应用不同,侧重点也不一样,导致脚手架在不同团队中具体落地也不一样。
比如 ToB 的团队可能比较关心兼容性、功能性,对 UI 那些花里胡哨的东西不太关心;而 ToC 的项目对性能、安全、美观要求就比较高,针对这方面的配置也就更看重。针对不同性质的客户,项目配置又可能有所不同。这时对团队内脚手架的可定制性的自由度要求更高,开源的通用模板可能已经无法满足要求,所以就需要自定义前端脚手架。
我们可以看看一个成熟的前端团队项目开发流程:
可以看到脚手架位于开发阶段的最前方,而一个完备、成熟的团队自定义脚手架,可以让团队在进入不同需求类型的前端项目开发时,起点更高、产出更快、更节约人力,一次配置,多次使用。
对于业务开发者来说,这套现有的脚手架就是一个黑盒,他们不需要了解其中的复杂原理,只需要知道如何配置即可。业务开发者需要做的就是在脚手架生成的模板上继续开发,所以生成的配置项跟项目要尽量适配,既要满足项目的功能需求,又不能有多余的冗余功能。
另外,使用同一套脚手架模板,使得类似的项目有着相同的结构与代码规范,也有利于项目的后期维护。
开发自定义脚手架的好处这么多,那么如何开发一个适用于本团队的自定义脚手架呢。
3. 深入 vue-cli 源码并实现一个自己的脚手架
要实现一个类似于 vue-cli 的脚手架,首先看一下需要哪些工具库:
commander.js:一个命令行框架,用来解析用户命令行输入和参数。
handlebars.js:一个模板引擎,用来将用户提交的信息动态填充到文件中。
Inquirer.js:一个交互式命令行工具,像 vue-cli3 中那样在命令行中和用户交互。
chalk.js:给终端的字体加上颜色,更加炫酷。
download-git-repo:下载并提取 Git 仓库,主要用来下载项目模板。
log-symbols:在终端上显示出 √ 或 × 等的图标。
ora:在终端上显示一些小图标(loading、succeed、warn 等)。
之前部分小伙伴反馈看完我的文章,编写自己的脚手架依然有困难,今天为大家带来一份福利(视频教学):
珠峰架构公开课这周日晚上 20:00 点给大家提供 《从零手写一个自己的vue-cli脚手架》的免费公开课,一节公开课的时间,就可以让你实现一个最适合自己的脚手架 ?。现在扫码就可以立刻免费参加,仅限前200名。
之前听过姜老师的公开课,讲解得非常清楚,还不会自定义脚手架的小伙伴不妨去学习一下(PS:我在写《【中高级前端必备】手摸手教你撸一个脚手架》 之前,也有听过姜老师的公开课)
「中高级前端进阶」从零开始手写一个 vue-cli 脚手架相关推荐
- 【面试题】 「中高级前端面试」JavaScript手写代码无敌秘籍
大厂面试题分享 面试题库 前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Proto ...
- 《视觉SLAM进阶:从零开始手写VIO》(二)
<视觉SLAM进阶:从零开始手写VIO>第二讲 1 安装im_utils 这个工具之前就使用过了,还写了博客,没想到在这里用上了,博客地址:https://blog.csdn.net/le ...
- 《视觉SLAM进阶:从零开始手写VIO》第三讲 基于优化的IMU预积分与视觉信息融合 作业
<视觉SLAM进阶:从零开始手写VIO>第三讲 基于优化的IMU预积分与视觉信息融合 作业 文章目录 <视觉SLAM进阶:从零开始手写VIO>第三讲 基于优化的IMU预积分与视 ...
- 《视觉SLAM进阶:从零开始手写VIO》第一讲作业
目录 1 视觉与IMU融合之后有何优势? 2 有哪些常见的视觉+IMU融合方案?有没有工业界应用的例子? 3 在学术界,VIO研究有哪些新进展?有没有将学习方法应用到VIO的例子? 4 四元数和李代数 ...
- 《视觉SLAM进阶:从零开始手写VIO》第二讲作业-IMU仿真、MU imu_utils标定
<视觉SLAM进阶:从零开始手写VIO>第二讲作业-IMU仿真.MU imu_utils标定 作业题目: 1 仿真代码解析 仿真代码地址:https://github.com/HeYiji ...
- 使用 Vue 从零开始手写一个猫咪瀑布流组件
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 猫咪瀑布流 如下动态图,一张张不规则的可爱猫咪照片是否勾起了你的少女心呢? 瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式.瀑布 ...
- ajax put请求_前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?
前言 在 Ajax 出现之前,网页想要和服务器通信,最常用的方式是使用 form 表单:用户提交表单后,浏览器就开始跳转,服务器接收表单并处理,然后将新的网页返回给浏览器:整个过程用户都只有等待,用户 ...
- 手写一个vue中英文翻译组件
1:下载vue-i18n插件 npm install vue-i18n 2:创建中英文js文件 在文件中写入需要翻译的内容 中文版cn.js export const m = {help: " ...
- vue 使用fs_模仿vue-cli,手写一个脚手架
vue-cli 在vue的开发的过程中,经常会使用到vue-cli脚手架工具去生成一个项目.在终端运行命令vue create hello-world后,就会有许多自动的脚本运行. 为什么会这样运行呢 ...
最新文章
- poj 2739 Sum of Consecutive Prime Numbers
- apache添加ssl协议实现用户认证
- mysql 事件里定义事物_聊一聊 MySQL 中的事务及其实现原理
- Juniper SRX防火墙批量导入set格式配置
- 避免下载Word/Excel文件时被IE开启
- C#项目学习 心得笔记本
- oracle 表收缩,Oracle 收缩表大小 Oracle Shrink Table
- mysql57数据库命令_centos7.2下安装mysql5.7数据库的命令详解
- 图解Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN
- pivot position_PIVOT用法详解
- C/C++,pascal函数调用约定
- 2020 年软件设计师考试上午真题
- WINCE 矩阵键盘 介绍
- linux下解压dmp文件怎么打开,查看dmp文件
- Ludwig Otto Hölder
- Android 6.0系统中图片剪切空指针崩溃问题解决纪录
- 工作小笔记——使用Cartographer建图和调优
- P2562 [AHOI2002]Kitty猫基因编码
- 扫描MAC地址脚本--保存
- vue + 百度地图 地址搜索并定位
热门文章
- [瑞芯微RK1109_RK1126-rkmedia编译记录]
- 《乘风破浪的姐姐2》开播大热,姐姐们的.fans相关域名速来抢!
- 建立时间和保持时间(1)
- MapReduce的经典入门案例
- JS-作用域--渡一教育(视频笔记)
- 【个人博客搭建及配置四】站长统计
- php100漏洞,phpyun人才管理系统V5.0 SQL注入漏洞分析
- 2022-2027年中国网络文学商业化市场竞争态势及行业投资前景预测报告
- InstallShield 2010 SP1发布(posted @ 2009-10-14)
- ~/.config/autostart 开机自运行程序