前端技术工程化的一小点实践

相比于两年前，前端工程化已经成为业内的标杆了，一个成熟的技术团队，必然要去思考这样的一个问题。

webpack 构建

webpack在前端领域的使用率非常高，基本已经成为前端构建领域的标杆。
那么，我们能使用webpack做什么呢？

1. JavaScript构建
   目前JavaScript构建的主要方向在与ES6+转换成ES5的代码，为了浏览器的实现进度、兼容性和高速发展的ES规范做的兼容处理。
2. CSS构建
   以react和vue为代表的组件化框架，基本都是使用CSS-IN-JS去实现组件，CSS-IN-JS的实现又有很多种。
3. 我们通常使用css-loader去解析CSS-IN-JS的代码。
4. 在css的基础上我们又可以引入scss、less等预编译器，提高css代码效率。
5. 在scss、less的基础上，再引入postcss的autoprefixer来提高代码的兼容性，无需手动添加各浏览器的属性名，就可做到各浏览器的兼容，autoprefixer使用caniuse网站上已知的兼容性问题和各大浏览器的内部实现。
6. 另外对于图片的处理，我们通常使用url-loader这个模块去做处理，小于一定大小的文件就使用base64来替代。
7. 其他的Icon，可以单独做成IconFont的形式，提高效率和性能。
8. 代码压缩
   js和css代码都是可以压缩的，去除空格和换行就可以节省很多的字节量，继而再开启服务端的Gzip压缩。Gzip的压缩率非常高，可以非常有效的减少带宽资源。
9. CDN的使用
   CDN可以极大的提升网站访问的速度，特别是在大流量的网站时，CDN可以省去很大一部分优化的开销。我们在使用webpack构建的时候，将构建完成的文件统一上传至CDN上，全自动化的构建过程就结束了。

cnpm仓库的使用

1. cnpm可以搭建至自己的服务器上，可以将一些私有组件放置在服务器上，供团队成员使用，提高开发效率。
2. 对于cnpm的使用，文档是极为重要的，在使用cnpm的时候一定要注意把组件的README写的尽量详细。
3. 将私有cnpm的scope域名分为@ui、@util、@server，将JS模块简单的划分，有利于高效搜索和使用。

代码规范

在eslint出现之后，前端的代码规范才开始慢慢的落实和成熟起来，以前的lint工具都或多或少有些许不尽如人意的地方，所以导致js的代码规范一直很差，大家可以查查网上各类博客上的js代码，只能用一个脏字来讲了。其实eslint最好的地方在于规则的可配置性极高，可以服务的团队群体也就会更多了。

组件框架的使用

1. 目前比较流行的组件框架有react和vue，这两框架在团队合作中最大的好处就在于其组件封装的彻底性。
2. 在没有这些框架的时候，我们同样使用jquery封装插件，一样可以提供组件式的开发模式，但是用jquery写过插件的人都应该了解，jquery插件的形式做的不够彻底，依旧和html、css有耦合，使用起来并没有react之类的流畅，而且有时还会产生插件冲突，效率十分低下。
3. 组件框架配合cnpm仓库，可是让大部分的团队成员不需要去重复造轮子，所有的基础组件都在cnpm里面，要什么拉什么。组件由专人维护，每个人owner一部分的组件开发，一旦有需求升级就找制定的负责人，提高开发效率。

以上是我个人对于前端技术工程化的一些见解，另外我认为，前端工程化并不只是在技术，很多关于团队内部合作的工程化流程也有很多。其实本篇还少了前端的性能优化，性能优化这方面非常庞大，而且每个网站的性能瓶颈一般都不同，所以本篇就先不聊这方面了。