前端工程化

前端开发人员经常面临与应用程序架构相关的问题。它需要使用一种能够轻松扩展并在应用程序模块之间提供松耦合和高内聚性的架构。 本文讨论功能切片设计架构，在我看来，它是可用选项中最好的。它还探讨了 FSD 的思想以及该架构方法解决的问题。我们将 FSD 与经典和

前言： 前端工程化一直是一个老生常谈的问题，不管是面试还是我们在公司做基建都会经常提到前端工程化，那么为什么经常会说到前端工程化，并没有听过后端工程化、Java工程化或者Python工程化呢？我们理解的前端工程化是不是一直都是Webpack的性能调优，或者是一个cli工

手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构， 本身是由一堆节点（Node）组成，每个节点都表示源代码中的一种结构。 不同结构用类型（Type）来区分，常见的节点类型有Identifier(标识符)，Expression(表达式)，VariableDeclarat

NPM代表npmjs.org这个网站，这个站点存储了很多Node.js的第三方功能包。 NPM的全称是Node Package Manager，它是一个Node.js包管理和分发工具，已经成为非官方的发布Node模块（包）的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段，并且通过NPM管理需要分享的代

高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发，这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack，进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli，它是一个专门为单页面应用快速搭建繁杂程序的脚手架，它可以轻

前端工程化是一种思想，而不是某种技术。主要目的是为了提高效率和降低成本，也就是说在开发的过程中可以提高开发效率，减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢？请几个工人一上来就开始弄，在建筑的过程中缺了材料就叫个工人去买，发现工期

知道软件包名，拿到源码或者路径的方法 在浏览器输入以下内容，就可以找到你想要的。。。 unpkg.com/输入包名 ESM特性清单： 自动采取严格模式，忽略“use strict” 每个ESM模块都是单独的私有作用域； ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本，就要有

Ajax：异步的js与xml。 作用： 1、通过ajax给服务器发送数据，并获得其响应的数据。 2、可以在不更新整个网页的情况下，与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象，用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

👍 点赞，你的认可是我创作的动力！ ⭐️ 收藏，你的青睐是我努力的方向！ ✏️ 评论，你的意见是我进步的财富！ 持续性能监控和自动化性能优化在前端开发中非常重要。以下是一些相关工具和实践： 性能监控工具 ：工具如Google Lighthouse、WebPageTest、PageSpeed Insights等可以

能够说出什么是前端工程化 能够说出webpack的作用 能够掌握webpack的基本使用 了解常用plugin的基本使用 了解常用loader的基本使用 能够说出Source Map的作用 前端工程化 webpack的基本使用 webpack中的插件 webpack中的loader 打包发布 Source Map 1.1小白眼中的前端开发vs实际的前端开发 实际

编写的代码 ==》经过打包工具（glup、rollup、webpack、vite）本身也是js代码，读取文件操作的， 依赖于 node 环境 = = 》 普通的html 、css 、javascript = = 》 打包到静态服务器 = = 》 跑在用户的浏览器 用于对路径和文件进行处理 在 Mac OS、Linux 和 window 上的路径上是不一样的，部署的

1.1 Git 常见工作流程  Git 有4个区域：工作区（workspace)、index（暂存区）、repository（本地仓库）和remote（远程仓库），而工作区就是指对文件发生更改的地方，更改通过git add 存入暂存区，然后由git commit 提交至本地仓库，最后push推送到远程仓库。 工作目录 包括.git 子目录（

前端模块化是一种标准，不是实现 理解模块化是理解前端工程化的前提 前端模块化是前端项目规模化的必然结果 前端模块化就是将复杂程序根据规范拆分成若干模块，一个模块包括输入和输出。而且模块的内部实现是私有的，它通过对外暴露接口与其他模块通信，而不是直

变量与模版字符串 let 和var的差别： const和var的差异 1、新增const和let类似，只是const定义的变量不能修改 2、并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。 模板字符串（template string）是增强版的字符串，用反引号（`）标识 1、字符串中可以

npm i -S express node app.js 全局中间件：第一个参数是回调函数时，则针对所有请求生效 路由中间件：第一个参数是匹配路由，第二个参数为回调函数 异常中间件：回调函数包含四个参数 异常中间件：回调函数包含四个参数 全局异常捕获 全局Promise异常捕获 需要购买或者找免费