前端工程化

前端工程化

当前端开发不再是简单的html+css+js，需要编写的东西越来越多，项目开发人员越来越多，我们迫切需要一种开发规则，围绕这项规则开发稳定，可维护的项目。工程化让这些零散的问题得以解决，工程化项目逐渐成为开发前提。

其实我们已经用到了很多工程化的脚手架，angular-cli、vue-cli、create-react-app等等，只是脚手架已经将项目可能用到的模块依赖，项目结构全全包揽，今天我们从内部说说开发脚手架之前，前辈们考虑到了哪些东西。

以下内容基于自己搭建开发环境

痛点：Web业务日益复杂化和多元化，需要考虑的因素越来越多

• 如何进行高效的多人协作；开发过程互不冲突，模块化开发，暴露调用接口
• 如何保证项目的可维护性；软件开发不是一蹴而就的事情，需要给未来需求保留一定的可能性
• 如何提高项目的开发质量；要开发风格一致的代码，看起来像是由一个人开发的

模块化

业务抽离，分割代码，形成依赖关系，再基础块之上进行拼装和按需加载，达到多人协作的可能；

模块化要注意隐藏内部作用域，只对外开放部分接口 后续我会写一篇手写***状态管理***的文章，其中会提到如何安全的对外提供接口，保证作用域部分属性的只读性。

JS模块化(偏向业务层，文件层)

ES6的模块系统现在已经完全可以取代现有的CommonJS规范，使用起来相当简洁，静态加载，再配合ES2020新的特性，动态加载，让模块化发挥最大作用。

1. webpack+babel 将所有的模块打包成一个文件同步加载，也可打成多个chunk异步加载；
2. 浏览器的<script type="module">加载；

CSS模块化

虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。

我目前在react项目中使用styled-components，我不再纠结css命名，使用原生css，杜绝大家的命名不统一；其实这种写法就是 CSS in JS的方案。后续我会写一篇关于这个模块的使用以及项目配置。

组件化(偏向UI层)

页面中的一切皆为组件，只是我们将html提供的组件称之为标签，细想一下，这些标签自带样式，有的标签自带事件。这也是我们组件化的思路，前端框架中vue单文件组件就是这样的思路，react+JSX+刚刚提到的styled-components同样的道理。

组件化带来了不言而喻的优点，组件复用，减少了项目大小，多人分工开发高效。

规范化

开发规范先行，制定良好的开发规范，为后期维护做保障

我目前用到的规范有如下：

• eslint代码检测，当然他又有一系列的自定义规范，目前流行的配置有eslint-config-airbnbeslint-config-standard大家自行学习；
• prettier代码美化工具，后续出eslintrc.js和prettier.js的配置；
• husky代码提交钩子，可以在代码提交前做一些自定义的事情。

上述这一切都是为了一个项目的整体性，可维护性，也是作为一个前端人必备的职业素质，成为更好的自己，加油吧！