究竟什么是前端脚手架?
? 咱也不知道咱也不敢问啊
先查查百度百科里对“脚手架”的定义吧:
脚手架是为了保证各施工过程顺利进行而搭设的工作平台。
然后搜一下“脚手架”,基本上都是以下几类:
Vue/React 脚手架
使用 Node、yeoman 打造自己的脚手架
从零搭建 webpack 脚手架
此时还是无法确定什么是“脚手架”,也许我心目中的脚手架应该是 vue/cli 或者 create-react-app 吧,然后我打开他们的文档,但是他们的介绍上并没有说这是一款脚手架…
谈一下我自己的“脚手架”
? 我最怕别人看到我的“脚手架”后说这有什么卵用…
看了一下我第一次在 Github 上的提交记录 Commits on Feb 13, 2017,我入行三年多,那时应该是我第一次进入前端工程化的时候吧。在此之前我在公司接手的都是一些很简单的项目,直接新建文件夹,随手下载一个jQuery,然后新建 index.html main.js style.css,有没有同样经历的小伙伴们?
后来做的项目多了,觉得每次这么新建项目太麻烦,我新建了一个文件夹,专门存放初始的模板,然后复制粘贴,继续撸。
再后来,接触到 vue,他可以实现在终端内输入一行指令就能生成模板,这可比我复制粘贴看起来高端多了,为了装逼我开始了研究如何开发自己的“脚手架”。
当时还真是没有几篇文章把这种操作说的很明白,甚至我并不知道我要做的东西叫什么(脚手架)。
我理解的“脚手架”
? 百科里说的很对我的思路,首要的就是保证我的项目可以顺利进行。
能够快速帮我生成新项目的目录模板(Node.js)。
能够提升我的开发效率和开发的舒适性(webpack)。
分享点干货
从零搭建这种我就不说了,毕竟一搜一堆,基本上就是推荐几个库,例如 commander、inquirer、ora 等等。分享一些在我的脚手架开发时遇到的一些问题和需求,分享想给大家。
版本验证
首先推荐工具库:
semver,版本对比。
request,发送请求,当然你也可以用 axios。
const semver = require('semver');
const request = require('request');
- Node.js 版本验证
如果你的脚手架想分享给别人用,这步最好不要避免,因为如果你用了一些现代化的 ES 语法,比如说 async await,老版本跑不起来的。
function checkNodeVersion (wanted) {// process.version 可以获取当前的 node 版本if (!semver.satisfies(process.version, wanted)) {console.log('Node版本不支持巴拉巴拉');// 退出进程process.exit(1);}
}
- 脚手架版本验证
正如上面所说,你如果分享给别人用,在你修改了一些 bug 后,希望其他人用最新的版本,那就应该提示他。
function checkPackageVersion(url) {return new Promise((resolve, reject) => {request(url, function (error, response, body) {if (!error && response.statusCode === 200){let version = JSON.parse(body).version;if (semver.lte(version, requiredVersion)) {resolve();} else {console.log('需要更新你的包巴拉巴拉');process.exit(1);}} else {console.log('发送请求失败巴拉巴拉');resolve();}});});
}
参数 url 当然传入 npm 的链接 https://registry.npmjs.org/[你的包名]/latest
当前路径下是否存在相同的文件夹
如果不做这层判断,你新生成的项目很可能会覆盖你已有的项目,别问我为啥想到这么做 ?
function hasFolder(name) {return new Promise (resolve => {fs.exists(name, exists => {if (exists) {console.log('已经存在相同目录巴拉巴拉');process.exit(1);} else {resolve();}});});
};
这里加了一层 Promise 是因为 Node 去检测是否存在文件夹是个异步操作,也需要耗时,这么做比较保险。
清空控制台
当你输入完命令后,好像进入了新的页面一样,看起来很舒服。
function clearConsole(color, str) {if (process.stdout.isTTY && store.cmd !== 'test') {const blank = '\n'.repeat(process.stdout.rows);console.log(blank);readline.cursorTo(process.stdout, 0, 0);readline.clearScreenDown(process.stdout);}
}
拷贝模板
很多关于如果构建脚手架里提到一个工具 download-git-repo,在 github 或其他仓库中下载模板。我并不是很喜欢这种操作,1、耗时,让脚手架构建速度更慢了,在没有网络的情况下无法构建。2、在 git 仓库中还需要新建项目模板,感觉把一个项目分离成了两个,不方便管理。
所以我打算直接从全局目录下将模板文件夹拷贝到当前路径下:
使用一个工具 fs-extra,node.js 新手最好不要试图用原生接口拷贝一个文件夹。
const src = path.resolve(__dirname, ‘…/template’);
const dest = path.resolve(process.cwd(), store.dirname);
两个概念:
全局环境路径:
const src = path.resolve(__dirname, '你的模板文件夹相对路径')
当前环境路径:
const dest = path.resolve(process.cwd(), '你创建项目的名称');
fs.copy(src, dest).then(() => /* 巴拉巴拉 */);
自动选择包管理器
现在用 yarn 的人越来越多,而且确实效率很高,如果安装过 yarn 就让它作为默认包管理器去自动安装依赖吧。
function packageManagement() {try {child_process.execSync('yarnpkg --version', { stdio: 'ignore' });return 'yarn';} catch (e) {return 'npm';}
}
自动安装依赖
这里用到 Node.js 中的 child_process.spawn 方法
这里举个例子,想要执行 npm install webpack -D
const ls = spawn('npm', ['isntall', 'webpack', '-D'], {shell: true});
ls.on('close', (code) => /* 巴拉巴拉 */)
第一个参数:要运行的命令。
第二个参数:数组,字符串参数的列表。
第三个参数:配置,这里把 shell 设置为 true。
使用 on 方法监听执行结果。
这里推荐安装的包带有版本号,如果直接安装会安装最新版,可能会导致不兼容。
提一个 webpack 的插件
ProgressPlugin,用于监听编译进度。
plugins: [new webpack.ProgressPlugin(function(percentage) {// percentage 进度 0-1})
]
这里配合前面说到的清空控制台,可以实现更好的体验。
使用 IP 访问项目
这里指的是通过 webpack 启动的 devServer。
host 配置为 0.0.0.0
通过下面的函数获取到本机的 IP 地址,这样就可以在同网下使用移动设备做测试了。
function getIPAdress() {let interfaces = require('os').networkInterfaces();// eslint-disable-next-line guard-for-infor (let devName in interfaces) {let iface = interfaces[devName];for (let i = 0; i < iface.length; i++) {let alias = iface[i];if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {return alias.address;}}}
}
再逼逼几句
这是我理解中的“脚手架”,希望其他小伙伴也评论一下自己理解的脚手架。
? 已经近一年没有做过技术分享了,每天在掘金里潜水,偶尔发点沸点,不敢在首页发内容,总觉得自己技术不足,怕大佬喷,自尊心受到创伤。
最后分享一下我的“脚手架”,这个项目在我面试中也起到了不错的效果:
文档:https://codexu.github.io/
究竟什么是前端脚手架?相关推荐
- 基于gulp的前端脚手架(二)
几天前搭了个小型的gulp自动化脚手架,运用到实际项目中发现还有一些小问题,今天来统一修复一下. 文章链接 基于gulp的前端脚手架(一) 存在的问题 雪碧图相关 1.使用2倍图后,若2倍图尺寸不是1 ...
- 使用Yeoman定制前端脚手架
首先附上Yeoman官网:yeoman.io/ 我制作的前端脚手架:generator-jake-front 以及我在前端同学的分享会上的分享ppt:yeoman.key 如果想快速制作一个脚手架,并 ...
- 手写一个合格的前端脚手架
为什么我们需要一套脚手架 为什么我们需要一套脚手架,它能帮助我们解决哪些痛点问题. •前端项目配置越来越繁琐.耗时,重复无意义的工作•项目结构不统一.不规范•前端项目类型繁多,不同项目不同配置,管理成 ...
- npm 全局安装vuecli报错_前端脚手架CLI生成模版命令工具(包括,npm包的发布,脚手架的搭建,注意事项,优化等)...
NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近.先是带来了Gulp.Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了 ...
- 前端脚手架是指什么?
前端脚手架是指什么? 前端开发中提bai到的"脚手架"是一个形象的比喻,比喻各类语言的前期工作环境. 在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要 ...
- php 脚手架,thinkphp集成前端脚手架Vue-cli的教程图解
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli. 一.安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找 ...
- 从0搭建前端脚手架详解(小白也可以搭建)
本篇文章用来为大家提供一个搭建简易前端脚手架的思路. 先来看一眼实现的效果. 从图上来看这个脚手架的功能非常的简单只有一个创建的命令,其他都是帮助和显示版本号的. 也就是上图这句,创建一个新项目,只需 ...
- 前端脚手架搭建(part 1)
本篇主要介绍如何搭建前端脚手架,一步一步地实现通过搭建的脚手架下载对应的项目模板. 通过脚手架的创建,可以快速搭建项目的基础配置和模板,在部门项目开发的规范中尤其总要. 初始化项目: 创建一个文件夹, ...
- yazi 前端脚手架
前端自动化工程 Installation sudo npm install -g yazi Getting To Know yazi 初始化前端脚手架 init yazi mb init yazi p ...
最新文章
- 从Preact了解一个类React的框架是怎么实现的(一): 元素创建
- java word模板占位符_word模板导出的几种方式:第一种:占位符替换模板导出(只适用于word中含有表格形式的)...
- php sql oracle数据库,PHP、PLSQL连接oracle数据库的方法
- CVPR2017有哪些值得读的Image Caption论文?
- uni.request接口封装;小程序uni-app接口封装
- druid删除数据_Apache druid 删除数据流程 0.13
- OpenShift 4 - DevSecOps Workshop (15) - 利用OpenShift GitOps向多个目标部署应用
- 基于库函数STM32流水灯的实现
- 为什么Bert的三个Embedding可以进行相加?
- Linux下编译CMake
- 100个2022实用微信小程序源码分享
- Java之UUID生成
- 在Ubuntu上使用Netdata设置实时性能监控
- Windows使用WakeOnLan配置【较详细】
- 强大TOP版淘客程序(带后台管理)
- 海外问卷调查项目分为哪几种?
- windows主机和虚拟机设置桥接
- linux 字幕制作工具,Arctime可视化字幕编辑器–做字幕从未如此简单
- 【单位圆覆盖最多点】POJ 1981
- python爬取58同城租房信息
热门文章
- SDJZU_新生_递推动规_HDU 2569 彼岸
- 苹果手机语音备忘录在哪_苹果手机备忘录误删除别慌,教你免费恢复
- 统计套利 Statistical arbitrage
- 计算机二级swot分析,基于SWOT模型的学科竞争力研究
- 分享电影《了不起的老爸》
- 区别:托管代码与非托管代码
- android调用在线天气服务,android通过google api获取天气信息示例
- python给图片加动态特效_一张图片能加动画特效,还能加背景音乐?Python制作雪景图...
- 计蒜客习题:修建大桥
- External Libraries中有包,但是运行还是找不到xxx程序包