前端工程化是指将前端开发中的各个环节，包括代码编写、构建打包、自动化测试、部署等通过工具和流程进行规范化和自动化。它可以提高前端开发的效率、降低出错概率、保证代码质量和可维护性，同时也能够加快项目交付和上线。
下面是前端工程化中的一些关键环节：
1、代码规范：制定代码规范可以统一团队的代码风格，提高代码可读性和可维护性。可以使用工具如 ESLint、Prettier 等对代码进行自动检查和格式化。
2、模块化：采用模块化的方式可以将代码拆分成多个小模块，方便管理和维护。可以使用工具如 webpack、rollup 等进行模块打包和构建。
(1)如何理解模块化,先要理解分解和聚合—分解和聚合有层次(函数(微观)–>文件(模块化)–>包(包管理工具))
(2) 以一个例子为例:需要求出100个数中的素数然后进行排序,我们可以定义一个函数处理此问题,先过滤数组拿到所有素数,然后将素数排序返回,当然我们完全可以将排序功能单独抽离为一个sort函数,在主函数中调用sort函数,实现以上功能;
(3)在以上函数中我们先分解然后聚合,但是我们对于一个语言只在函数层面进行分解和聚合实现远远不够的,所以js语言中将分解和聚合上升到文件级别;
(4)但是文件级别的分解和聚合会导致两个问题:全局污染(在一个js文件中通过两个script标签引入两个js文件,在进行变量及函数声明时会污染全局环境,但是对于模块化后的文件,它会有属于自己的作用域)和依赖混乱----所以模块化就是用来修复以上两个问题的,即模块化解决的便是文件级别的分解和聚合问题;
为了解决以上问题提出了一些模块化标准–ES6Module和CommonJS还有其他的AMD、CMD;;;CommonJS和ES6Module区别
(1) ES6 Module官方的,CommonJs社区民间的
(2)CommonJS运行时,ES6Module编译时 ----即CommonJS对模块依赖的解决是动态的,而ES6Module对模块依赖的解决是静态的,动态:模块依赖关系的建立发生在代码运行阶段,运行到require(b.js)时,才会建立a.js与b.js的依赖关系;静态:表示模块之间的依赖关系建立发生在代码编译阶段,在编译阶段就知道了模块之间的依赖关系
(3)因为ES6Module在编辑阶段就建立了模块之间的依赖关系,所以相较于CommonJS,ES6Module有以下几点优势:
----死代码排除和检测,通过静态分析工具在打包时去除掉一些未曾使用过的模块;
----可以在编译阶段确保模块之间传递的值和接口类型是正确的
----编译器优化
(4)使用方式:commonjs通过require加载,通过module.exports导出
ESModule import … from … 导入 通过export 或者export default导出
if(a){
require(a.js)
}else {
require(b.js)
}
编译时:运行之前就要知道模块的依赖关系,所以以下代码会报错(以下代码是静态导入,但我们可以使用动态导入),所以一般在js代码中我们需要将导入语句提前到当前作用域的顶部
静态导入---报错
if(a){
import a from 'a.js'
}else {
import a from 'b.js'
}
动态导入---支持
if(a){
import('a.js')
}else {
import('b.js')
}
3、自动化测试：自动化测试可以帮助开发者降低出错概率，保证代码质量和稳定性。可以使用工具如 Jest、Mocha、Selenium 等进行自动化测试。
4持续集成和持续部署：持续集成和持续部署可以将代码自动构建、测试和部署到生产环境，加快项目交付和上线。可以使用工具如 Jenkins、Travis CI、GitLab CI 等进行持续集成和持续部署。
5性能优化：优化前端性能可以提高网站的加载速度和用户体验。可以使用工具如 Webpack Bundle Analyzer、Lighthouse、Google PageSpeed Insights 等进行性能优化。
总的来说，前端工程化通过规范化和自动化各个环节，可以提高开发效率、降低出错概率、保证代码质量和可维护性，同时也能够加快项目交付和上线。
