前端如何搭建自己的脚手架,如何制作一个自定义前端脚手架

2023-04-29 16:44 综合百科 0阅读 投稿:小七

前端如何搭建自己的脚手架,如何制作一个自定义前端脚手架图1

自主搭建5个精品脚手架,玩转前端提效

下栽地止:***/3796/


覆盖前端研发全流程环节,可通用、可复用
当下的前端开发,离不开脚手架。初级前端需会用脚手架,中高级前端应能够开发脚手架——掌握脚手架,就是贯穿初中高级前端生涯的核心竞争力之一。本课程集中讲解脚手架的设计思路和开发实践,并带你实现5个不同的脚手架项目,助力前端全流程提效,塑造个人竞争优势。

为什么需求脚手架?
脚手架本质上是一种东西,使用脚手架的意图是为了脱节制作一个项意图重复性作业,特别是当一个项目具有一定的通用性时,工程脚手架的含义更加杰出。它允许咱们只用一行指令来初始化一个项目,而不是做比方装备环境、装置依靠项和解决依靠项抵触之类的顺便使命。咱们能够直接进入主使命,早点下班~ ~
概述
要开发新的脚手架,一般需求以下npm包:
commander:node的强壮指令行处理东西。能够很简单的得到指令行的参数。
Inquirer:一个指令行交互东西,让你以“一问一答”的交互方法完结一系列指令行操作。
Download-git-repo: git资源库下载东西,一般用于下载模板代码。
Ora:终端加载美化东西。
粉笔:指令行输入/输出美化东西。假如你想要一个丰富多彩的指令行版别,就挑选它。
车把:模板引擎
前端如何搭建自己的脚手架,如何制作一个自定义前端脚手架图2完成的功用:
一个简单的指令初始化项目。
提供友爱的交互体验。
您能够挑选装置不同的模板。
自动装置项目依靠项
在package.json中增加一个bin字段。在装置过程中,npm会将文件符号链接到前缀/bin,用于全局装置或。/node_modules/。bin/本地装置。这样就能够全球通用了。比方下面以meo-cli为指令名,可履行文件为根目录的index.js。
这是为什么呢?由于咱们还没有装置相应的包,当然不会链接到全球。一种办法是外包出去,然后在本地装置。但是太麻烦了。每次调试都要外包吗??
有没有更优雅的方法?答案是:npm早就想好了对策,就是npm link,能够把指定的履行文件链接到全局情况,用起来也很简单。它在项意图根目录中履行:
npm链接
去做吧。假如履行该指令后,显现类似“装置npm软件包”的提示,则意味着链接成功。履行meo-cli后,您能够看到令人欣慰的hello world。留意这里第一行的代码。
Commander的用法如下:。command ('init [name]',' init a project ',OPTS)函数:注册一个指令。
第一个参数:set指令的称号,后面能够跟参数,表明必需参数,[]表明可选参数。
第二个参数:指令的描绘,可选。留意,当有第二个参数时,不能显现的调用动作作为指令的回调,需求单独的可履行文件作为指令。
第三个参数:装备参数,如noHelp、isDefault等。选项('-n,-name | [name]',' desc ',' GK ')
功用:定义指令选项,(附加参数,如指令,用于辅佐指令)
。描绘(“这是desc的指令”)
功用:指令的描绘将应用于指令的帮助信息,在使用帮助指令时显现。
。action(cb):指令的回调函数

声明:若水百科所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系youzivr@vip.qq.com