前言简单来讲前端工程化就是软件工程加上前端, 是以自动化状态呈现的, 就个人所理解的情况而言, 前端工程化从开发阶段一直到代码发布到生产环境, 涵盖了以下几个方面的内容:下面, 我们依据上述那几个内容, 挑选出具有代表性的几个方面, 进而开展深入的前端工程化学习。脚手架脚手架是什么What现今流行的前端脚手架大体都是基于特定编写而成, 举例来说, 像我们日常常用的Vue-CLI, 较为热门的那个-react-app, 加还有Dva-CLI这样的。脚手架存在的意义Why你看, 前端工程化概念如今越发深入人心, 脚手架乃为减少重复性工作而被引入的命令行工具, 它能让你摆脱ctrl c, ctrl v, 这是为啥呢? 就说现在新建一个前端项目, 可不是像之前那样在html头部引入css, 尾部引入js那么简单, css现在都用Sass或者Less来编写, 在js里引入, 再动态构建注入到html中而且, 除学习基本的js, css语法以及热门框架之外, 还得学习构建工具, 得了解babel怎么配置, 怎么启动前端服务, 怎么实现热更新再有, 为了编写时让编辑器帮咱查错并更规范, 还得引入相关东西甚至有些项目还得引入单元测试Jest。对于一个处于更入门阶段的人来讲, 这无疑会使人望而却步。前端脚手架予以出现, 事情随即便简而化, 借助一键命令, 去新建一个工程, 之后再执行两个npm的命令, 从而跑起一个项目。在入门这个阶段时, 无需对配置之类事项予以关注, 只需心情愉快地开展写代码行动就可以了。基于koa, 怎样去实现一个新建项目脚手架呢? How首先, 对实现思路进行一下梳理。我们达成脚手架的关键理念乃是自动化思考方式, 把重复性的通过按下ctrl c, 之后再按下 ctrl v来创建项目之行 为, 借着程序将其处理。处理进程有如下面这般:将文件夹予以创建, 此文件夹名为项目名, 接着, 把名为 index.js 的文件进行创建, 再创作.jason, 随后, 安排安装依赖, 其中, 要先将文件夹进行创建。创建文件夹前需要先删除清空引入的 fs 模块, 使用那种 API, 靠这个去创建文件夹: 我们是这么做的。2. 创建 index.js进行创建, 创建出索引javaS脚本文件, 此即index.js这一文件, 借助fs模块所具备的有关API来开展此项创建工作。进而我们要瞧瞧, 动态模板怎样生成? 我们格外理想的途径为借助配置去动态生成文件模板, 那么具体来瞅瞅实现的逻辑。3. 创建 .json生成.json文件, 实际上跟生成index.js大致相似, 皆是运用动态生成模板的想法来达成, 我们瞧瞧核心办法plate的实现代码:4. 安装依赖为了能够自动进行所需依赖的安装, 我们之所以能够使用这个 execa库, 是因为它可以去执行那个可以进行 yarn安装操作的命令:到了这个时候, 我们已然借助相关方式达成了新建项目的脚手架。最终我们能够再次整理下那些可以优化的要点, 进而把它升级得更加完善。比如说, 把程序配置升级为 GUI 用户配置也就是用户借助手动选择或者输入的方式来传入配置参数, 像项目名这类参数。编译构建编译构建是什么构建, 亦称作编译, 此乃前端工程自化体系里功能最为繁杂、最为琐碎的模块, 它肩负那种从源代码转变为宿主可执行在浏览器的代码的担子, 它里头核心的东西是资源的管理。前端所产出的资源涵盖JS、CSS、HTML这类, 各自所对应的源代码分别是:原理若打算切实运用好编译构建工具, 那我们得先去知晓一下它的工作原理, 工作原理是, 通过递归方式找出全部依赖模块, 令源码转变成为浏览器能够执行的代码, 进而构建输出, 具体的工作流程步骤犹如以下这般:从配置文件那儿取参数, 再把它跟 shell 脚本里的参数合并起来。用上一步合并好了的参数去初始化对象, 接着执行 run 方法, 这就开始着手准备编译。按照配置当中的 entry 内容, 去确定入口文件。从已经确定好的入口文件作为起始点, 通过递归遍历的方式去找出所有依赖模块对应的文件。对找出的带有依赖关系的所有模块文件进行转译操作, 以此得到转译过后的最终内容以及它们之间的依赖关联。依据已然锁定的入口以及各模块之间的依赖关系, 将其组装成一个个 chunk, 然后添加到输出列表里面。根据配置中的相关内容, 去明确输出路径以及文件名, 把文件内容写入到输出目录默认设定为 dist。这就是实践 1. 基础配置的整个流程。entry当处于编译构建阶段时, 为了能够找到编译的入口文件, 从而进而构建起内部依赖图, 才会有入口配置。输出配置, 告知其创建内容的输出位置所在之处 , 连同怎样为这些文件进行命名。具备模块转换功能的器件, 能够针对浏览器没办法直接去运行的文件模块予以应对, 将其转变成为能正常发挥作用的模块。举例来讲, 像对于css-以及style-而言是处理样式的任务 , 而url-跟file-则是负责处理图片相关事宜的。插件具有解决那些没办法实现的问题的功能, 在整个构建的生命周期中, 它都能够以扩展的方式呈现。臂如, 进行打包的优化、开展资源的管理, 还有注入环境变量等等类似的事儿。而接下来要讲述的是基本配置所具有的简单示例:参考官网//注意使用不同版本的 切换对应版本的文档哦2. 性能优化编译速度优化检测编译速度寻找检测编译速度的工具比如有一款名为speed的插件, 借助这个插件, 能够对每一个的执行耗时具体情形展开分析。优化编译速度该怎么做呢通过减少搜索依赖的时间配置、匹配规则test//, 来缩小搜索范围以减少搜索时间, 经减少解析转换的时间配置精准过滤不用解析的模块, 针对性能消耗大的开启多进程, 凭借减少构建输出的时间压缩代码并开启多进程, 合理运用缓存策略如babel-开启缓存、中间模块启用缓存比如使用。可参考的具体优化措施为: 性能优化的一段经历, 项目复盘, 针对具有难度的情况。体积优化检测包体积大小寻觅用于检测构建之后包体积大小的工具, 像是那种 -- 插件, 运用此插件去剖析打包所生成后的每个模块体积大小。优化体积该怎么做呢脱离第三方依靠, 清除没有用处的代码, Tree, 具体的优化办法参照: 性能优化的一回经历相关项目的复盘。概述它是一个模块打包器, 能够把小块代码编译为大块且复杂的代码, 以此用于例如某种程序或应用程序等情况。并且它针对代码模块能够运用新的标准化格式, 比方某些格式以及 es格式。原理我们先来了解下 原理其主要工作机制是使用 Acorn 读取解析文件来确定入口文件, 获取到抽象语法树 AST 后分析代码生成代码并输出, 相对来说, 打包出来的包会更轻量化些, 此包更适用于类库打包, 这是因为内置了 Tree 机制, 在分析代码阶段就能知道哪些文件引了却没调用, 那么在打包时就会自动把未使用的代码给擦掉。橡果是一种语法剖析器, 它把字符串剖析成语法抽象树即AST。要是想知晓AST语法树, 能够点击这个网址/。实践input入口处的文件路径, 输出的文件, 输出的格式当中包含着amd/es6/iife/umd/cjs, 启用等等。各种插件所使用的配置, 将外部依赖提取出去, 配置全局变量。下面呈现的是基础配置的简单示例:概述Vite, 相较于 、 等工具而言, 极大程度上改进了前端开发者的开发体验效果, 其编译速度极其之快。Vite原理是何种缘由致使Vite开发编译速度这般特别快, 我们即刻着手去探究一下它所蕴含的原理。从上述图片能够看出, Vite 的原理在于借助当下主流的浏览器对原生 ESM 规范予以支持, 协同地进行拦截操作, 并且将代码编译成能够被浏览器所支持的。Vite实践体验我们能够构建一个Hello World样式的Vite项目, 以此去体会那飞速的开发感受:留意一下, Vite 所需的 Node.js 版本, 要大于或等于 12.0.0这件事。使用 NPM:使用 Yarn:上图呈现的是, Vite工程项目 的编译用时, 为363毫秒, 有着开发时秒级编译的感受, 实际上真的是非常让人称赞的3种构建工具综合对比测试前端项目规模逐渐增大之际, 开发迭代维护所需的成本便会不断攀升, 数十个模块相互之间的调用状况呈现出繁复错乱的态势基于提升代码质量以及可维护性的考量, 编写测试之事成为必要之举。接下来便针对前端工程常常会开展的3类测试, 向大家进行详尽的介绍。单元测试单元测试, 乃是针对最小可加以测试的单元, 此单元通常为单个之函数、单个的类, 或是单个的组件, 要去开展检查以及验证。编写单元测试架构存在诸多, 像Mocha, 断言库Chai, Sinon, Jest等。我们能够率先挑选jest予以研习, 鉴于其整合了Mocha, chai, jsdom, sinon等效能。紧接着, 我们一同瞧瞧jest怎样去创作单元测试呢?撰写测试依据正确性来进行, 也就是讲正确的输入理应获得正常的结果。撰写测试是依照错误性来做的, 这意味着错误的输入应当呈现为错误的结果。以验证求和函数为例组件测试针对某个会涉及很多DOM操作从而增加难度的组件功能开展的组件测试, 对于此, 常借助能做组件测试、也能做e2e测试的测试框架来处理。那么, 这个组件测试究竟要怎么做呢?以 vue3 组件测试为例我们事先构建好 vue3 与 vite 的项目, 着手编写用于测试的组件, 接着安装环境于 / , 编写关于组件的测试脚本文件, 执行 open - ct 命令, 启动其服务, 运行 xx.spec.js 测试脚本, 这样就能直观地看到单个组件自行按照操作逻辑执行。e2e测试所谓的e2e测试, 换句话讲叫端到端测试, 主要的行为就是针对页面模拟用户去展开一系列操作, 进而得以验证其是不是符合预期。同样的, 我们也能够运用 来开展e2e测试, 那么具体该怎么去做呢。以 todo list 功能验证为例咱得先把 vue3 与 vite 项目搭建好, 去编写测试组件, 接着安装环境, 环境要安装在 / , 然后编写组件测试脚本文件, 编写完后执行 open 命令, 通过执行 open 命令来启动服务, 启动服务之后, 去选择 xx.spec.js 测试脚本, 如此一来就能直观地看到模拟用户的操作流程了。总结本文前言部分, 从六个方面, 即开发、构建、性能、测试、部署、规范, 较为周全详尽地对前端工程化的知识点予以了梳理, 对于正文, 其着重介绍的是前端工程化于实践项目里得以落地运用的核心技术点。期望这篇文章可以对那些正在进行前端工程化学习的小伙伴起到助力作用, 进而得以构建起完备的知识图谱。