共计 1537 个字符，预计需要花费 4 分钟才能阅读完成。
如何做 ” 前端工程化 ”？
前端工程化就是为了让前端开发可能“自成体系”，集体认为次要应该从模块化、组件化、规范化、自动化四个方面思考。
一、模块化
1、JS 的模块化
拆分、封装大块的业务逻辑，抽离公共函数等
2、CSS 的模块化
尽管 SASS、LESS、Stylus 等预处理器实现了 CSS 的文件拆分，但没有解决 CSS 模块化的一个重要问题：选择器的全局净化问题。按情理，一个模块化的文件应该要暗藏外部作用域，只裸露大量接口给使用者。而依照目前预处理器的形式，导入一个 CSS 模块后，已存在的款式有被笼罩的危险。尽管重写款式是 CSS 的一个劣势，但这并不利于多人合作。3、资源的模块化
资源模块化后，依赖关系单一化。所有 CSS 和图片等资源的依赖关系对立走 JS 路线，无需额定解决 CSS 预处理器的依赖关系，也不需解决代码迁徙时的图片合并、字体图片等门路问题；资源解决集成化。当初能够用 loader 对各种资源做各种事件，比方简单的 vue-loader 等等；我的项目构造清晰化。应用 Webpack 后，你的我的项目构造总能够示意成这样的函数：dest = webpack(src, config)二、组件化
1、从 UI 拆分下来的每个蕴含模板 (HTML)+ 款式(CSS)+ 逻辑(JS) 性能齐备的结构单元，咱们称之为组件。2、组件化≠模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对 UI（用户界面）的拆分三、规范化
规范化其实是工程化中很重要的一个局部，我的项目初期标准制订的好坏会间接影响到前期的开发品质。比方：1、目录构造的制订
2、目录构造的正当设定，能为我的项目带来很多长处：有助于进步我的项目的逻辑构造合理性；对应扩大和单干；不便资源的对立定位治理。3、编码标准
制订一套良好的编码标准能够加强团队开发合作、进步代码品质。举荐参考凹凸实验室打造的前端代码标准。编码标准包含：1、HTML 标准。基于 W3C、苹果开发者 等官网文档，并联合团队业务和开发过程中总结的标准约定，让页面 HTML 代码更具语义性。2、CSS 标准。对立标准团队 CSS 代码书写格调和应用 CSS 预编译语言语法格调，提供罕用媒体查问语句和浏览器公有属性援用，并从业务层面对立标准罕用模块的援用。3、JS 标准。对立标准团队 CSS 代码书写格调和应用 CSS 预编译语言语法格调，提供罕用媒体查问语句和浏览器公有属性援用，并从业务层面对立标准罕用模块的援用。4、图片标准。理解各种图片格式个性，依据个性制订图片标准，包含但不限于图片的品质约定、图片引入形式、图片合并解决等，旨在从图片层面优化页面性能。5、命名标准。从 目录、图片、HTML/CSS 文件、ClassName 的命名等层面约定标准团队的命名习惯，加强团队代码的可读性。6、前后端接口标准“基于 Ajax 带来的 SPA 时代”，这种模式下，前后端的分工十分清晰，前后端的要害合作点是 Ajax 接口，引发一个重要问题：前后端的对接界面单方却关注甚少，没有任何接口约定标准状况下各自撸起袖子就是干，导致咱们在产品我的项目开发过程中，前后端的接口联调对接工作量占比在 30%-50% 左右，甚至会更高。往往前后端接口联调对接及零碎间的联调对接都是整个产品我的项目研发的软肋。接口标准次要初衷就是标准约定后行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专一于各自善于的畛域。7、文档标准
8、组件治理
9、git 分支治理
10、commit 形容标准
11、视觉图标标准四、自动化
前言：前端工程化的很多脏活累活都应该交给自动化工具来实现。须要秉持的一个理念是: 任何简单机械的重复劳动都应该让机器去实现。1、继续继承
2、自动化构建
3、自动化部署
4、自动化测试以上就是对于怎么去做前端工程化的一些具体参考
正文完
