前端工程化（Frontend Tooling）：优化开发流程的关键
前端工程化是现代Web开发的关键组成部分，它包括一系列工具、实践和流程，旨在提高开发效率、代码质量和可维护性。本博客将深入探讨前端工程化的概念、工具以及如何在项目中应用它们，以改善您的前端开发体验。 什么是前端工程化？ 前端工程化是一种方法，旨在优化前端开发流程，使开发人员能够更高效地构建、测试和部署Web应用程...
webpack 01 - 初识前端工程化
什么是前端工程化？前端工程化，让前端开发更方便，更高效，更易于管理的一种方法。通过使用构建工具（如Webpack、Gulp自动化处理一些繁琐的任务，比如代码压缩、文件合并、自动刷新等。这样开发者可以专注于写代码，而不用手动处理这些重复的工作。用盖房子举例假如你是一名建筑工人，你的工作是帮助设计师把一幢房屋建造出来。在建造房屋的过程中，你需要使用不同的工具和材料，比如锤子、钉子、刷子、油漆、墙砖等....
手把手带你入门前端工程化——超详细教程（四）
性能优化性能优化主要分为两类：加载时优化运行时优化例如压缩文件、使用 CDN 就属于加载时优化；减少 DOM 操作，使用事件委托属于运行时优化。在解决问题之前，必须先找出问题，否则无从下手。所以在做性能优化之前，最好先调查一下网站的加载性能和运行性能。手动检查检查加载性能一个网站加载性能如何主要看白屏时间和首屏时间。白屏时间：指从输入网址，到页面开始显示内容的时间。首屏时间：指从输入网址，到页面....
手把手带你入门前端工程化——超详细教程（三）
错误监控现在能捕捉的错误有三种。资源加载错误，通过 addEventListener('error', callback, true) 在捕获阶段捕捉资源加载失败错误。js 执行错误，通过 window.onerror 捕捉 js 错误。promise 错误，通过 addEventListener('unhandledrejection', callback)捕捉 promise 错误，但是没有....
手把手带你入门前端工程化——超详细教程（二）
单元测试单元测试就是对一个函数、一个组件、一个类做的测试，它针对的粒度比较小。它应该怎么写呢？根据正确性写测试，即正确的输入应该有正常的结果。根据异常写测试，即错误的输入应该是错误的结果。对一个函数做测试例如一个取绝对值的函数 abs()，输入 1,2，结果应该与输入相同；输入 -1,-2，结果应该与输入相反。如果输入非数字，例如 "abc"，应该抛出一个类型错误。对一个类做测试假设有这样一个类....
手把手带你入门前端工程化——超详细教程（一）
本文将分成以下 7 个小节：技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程，让大家动手实践。另外我还写了一个前端工程化 demo 放在 github 上。这个 demo 包含了 js、css、git 验证，其中 js、css 验证需要安装 VSCode，具体教程在下文中会有提及。技术选型对于前端来说，技术选型挺简单的。就是做选择题，三大框架中选一个。个人认为可以依据以下....
前端工程化建设
更多文章随着浏览器和前端技术的发展，现在的前端项目越来越大、业务也越来越复杂，前端工程化已经成为一件势在必行的事情。前端工程化其实就是软件工程在前端方向上的实施，不过篇幅有限，本文只讲解其中的几个点。团队规范如果前端团队只有一两个人，规范的作用微乎其微；但团队人数超过一定数量时，规范的作用就显现出来了。举个例子，拿代码风格规范来说，有些人喜欢用两个空格缩进，有些人喜欢用四个空格缩进，如果这两个人....
【React】React+TS 前端工程化 Axios二次封装
【React】React+TS 前端工程化 Axios二次封装import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios"; //接口地址 const baseURL = "htt...
webpack----前端工程化与webpack的基本使用
1前端工程化在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终就是实现前端的模块化、组件化、规范化、自动化。1.模块化js的模块化、css的模块化、其他资源的模块化2.组件化复用现有的UI结构、样式、行为3.规范化目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理4.自动化自动化管理、自动部署、自动化测试目前前端工程化的主流解决方案：web....
前端工程化与webpack（二）
4webpack中的loader4.1loader概述在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!loader加载器的作用：协助webpack打包处理特定的文件模块。比如：css-loader 可以打包处理 .css 相关的文件less-load....
本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。
前端更多工程化相关
阿里巴巴终端技术
阿里巴巴终端技术最新内容汇聚在此，由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界，将面向未来，制定技术策略和目标并落地执行，推动终端技术发展，帮助工程师成长，打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号：阿里巴巴终端技术，欢迎关注。
+关注