前端反卷计划-脚手架-原理介绍

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 前端反卷计划-脚手架-原理介绍

核心目标

开发脚手架的核心目标:提升前端研发效能

image.png

脚手架核心价值

将研发过程:
1.自动化:项目重复代码拷贝/git操作/发布上线操作
2.标准化:项目创建/git flow/发布流程/回滚流程
3.数据化:研发过程系统化,数据化,使得研发过程可量化

和自动化构建工具区别

问题:jenkins, travis等自动化构建工具已经比较成熟了,为什么还需要自研脚手架?
1.不满足需求:jenkins,travis通常在git hooks中触发,需要在服务端执行,无法覆盖研发人员本地的功能,如:创建项目自动化,本地git操作自动化等。
2.定制复杂:jenkins, travis 定制过程需要开发插件,其过程较为复杂,需要使用java语言,对前端同学不够友好

从使用角度理解什么是脚手架?

脚手架简介

脚手架本质是一个操作系统的客户端,它通过命令行执行,比如:

vue create vue-test-app

上面这条命令由3个部分组成:
1.主命令:vue
2.command:create
3.command的param:vue-test-app

它表示创建一个vue项目,项目的名称为:vue-test-app,以上是一个较为简单的脚手架命令,但实际场景往往更加复杂,比如:

当前目录已经有文件了,我们需要覆盖当前目录下的文件,强制进行安装 vue 项目,此时我们就可以输入:

vue create vue-test-app --force

这里的 --force 叫做 option, 用来辅助脚手架确认在特定场景下用户的选择。

还有一种场景:
通过 vue create 创建项目时,会自动执行 npm install 帮用户安装依赖,如果我们希望使用淘宝源来安装,可以输入命令:

vue create vue-test-app --force -r https://registry.npm.taobao.org

这里的 -r 也叫做 option, 它与 --force 不同的是它使用 - , 并且使用简写。这里的 -r 也可以替换成 --registry。

可以通过下面命令查看所有 vue create 支持的所有 options

vue create --help

脚手架执行原理

image.png

脚手架的执行原理如下:
1.在终端解析 vue create vue-test-app
2.终端解析出 vue命令
3.终端在环境变量中找到 vue命令
4.终端根据 vue 命令链接到实际文件 vue.js
5.终端利用 node 执行 vue.js
6.vue.js 解析 command/options
7.vue.js 执行 command
8.执行完毕,退出执行

从应用的角度看如何开发一个脚手架

以 vue-cli 为例
1.开发 npm 项目,该项目中应包含一个 bin/vue.js 文件,并将这个项目发布到 npm
2.将 npm 项目 安装到 node 的 lib/node_modules
3.在 node 的 bin 目录下配置 vue 的软连接指向 lib/node_modules/@vue/cli/bin/vue.js
这样在执行 vue 命令的时候就可以找到 vue.js 进行执行。

脚手架的实现原理

1.为什么全局安装 @vue/cli 后添加的命令为vue?
2.全局安装 @vue/cli 时发生了什么?
3.执行 vue命令时发生了什么?为什么 vue指向了一个 js文件 ,我们却可以通过 vue 命令去执行它?

脚手架原理进阶

1.为什么说脚手架本质是操作系统的客户端?
本质是node是操作系统,通过 node -e 来解析js文件
2.如何为node 脚手架创建别名?
创建软连接:ln -s /a.js 别名
3.描述脚手架命令执行的全过程
1.用户在终端输入 vue create vue-test-app
2.终端会在 $PATH 查询 vue 命令。相当于执行 which vue
3.查询实际链接文件
4.通过 /usr/bin/env node 执行文件

相关文章
|
1月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
2月前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
57 8
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
81 1
|
2月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
69 5
|
3月前
|
资源调度 前端开发 JavaScript
前端研发链路之脚手架
本文首发于微信公众号“前端徐徐”。文章介绍了前端开发中脚手架工具的重要性及其工作原理。脚手架工具能够大幅提升开发效率,确保代码质量和项目一致性。文章详细探讨了脚手架的历史、工作原理、常见工具及其优势与潜在问题,并展望了其未来发展方向,帮助开发者更好地理解和应用脚手架工具。
66 4
前端研发链路之脚手架
|
3月前
|
编解码 前端开发 JavaScript
前端:Rem 及其转换原理
Rem是一种用于前端开发的相对字体大小单位,它基于根元素的字体尺寸来定义文本大小,有助于实现响应式布局和可维护性。Rem的转换原理是通过相对于HTML根元素的字体大小来设置子元素的字体大小,从而实现统一的比例调整,提高页面的适应性和灵活性。此方法简化了跨浏览器和设备的布局调整,增强了用户体验。
|
4月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
4月前
|
移动开发 前端开发 JavaScript
浅谈前端路由原理hash和history
该文章详细解析了前端路由的两种模式——Hash模式与History模式的工作原理及其实现方式,并通过实例代码展示了如何在实际项目中运用这两种路由模式。
|
3月前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
1702 0
|
3月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
273 0