11.用npm管理第三方工具
上篇文章提及过npm是世界上最大的第三方包管理工具，如果没有npm也就没有当今JS前端的繁荣。做过前端的工程师们都深有体会，我们要引用第三的插件，需要找到对应的插件下载地址，如果版本更新了，也无法很快进行更新，如今有了NPM我们就能愉快的开发前端了。比如通过npm安装bootstrap:
npm install bootstrap@3 -save
如何在es6项目中引用呢？
import $ from 'jquery'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
12.使用webpack前端打包工具
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。它能有Grunt或Gulp所有基本功能。优点如下：
支持commonJS和AMD模块。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
关于webpack的安装与使用，可以查看小编以前写的历史文章《JS基础一起学 | Webpack入门篇》
13.选择一款快速构建前端项目的框架
构建一个现代的web前端项目，没有一个健壮的前端框架怎么能行。自己去造轮子还是选择一个流行的前端框架？对于互联网型的产品，时间就是生命，小编还是建议还是把精力放在业务上，如何选择前端框架呢，目前主流的有angular、vue、react,这三个框架各有特点，需要结合自身业务特点和团队实际情况进行选择。
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等，目前最新版本已经发展到4.0，感兴趣的同学可以去中文进行学习（http://www.angular.cn），还是谷歌为中国开发者考虑的周到,可以第一时间学习到最新的中文技术资料，同时还能边看边学习英文。
Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。值得一提的vue的作者是我们中国人尤雨溪，在本地化方面更懂得我们中国开发者，上手也很容易。官方网站地址：https://cn.vuejs.org/
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。官方网站地址：https://facebook.github.io/react/
React具有以下特点：
声明式设计：React采用声明范式，可以轻松描述应用。
高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活：React可以与已知的库或框架很好地配合。
关于react的入门文章可以看公众号的历史文章《一起学React | React新手看这篇就够了》
14.Redux状态管理容器
大家想必对MVC的框架都很熟悉，数据层的变化会引起视图层的变化，当你的业务越来越复杂时，要定位和排查问题就会比较困难，因为视图层的变化很难定位是哪层数据引起的。这也是redux出现的原因。
Redux由Dan Abramov在2015年创建。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。Redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架，而不是传统的像underscore.js或者AngularJs那样的库或者框架。Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）。
Redux的核心概念有三个：actions 、store、reducers。
关于redux的学习，大家可以去官方深入学习，官方地址：http://redux.js.org/。小编这里也有些存货，大家可以查看公众号的历史文章《在 2017 年学习 React + Redux 的一些建议（上篇）》
15 css回归测试工具PhantomCSS
测试是完善的研发体系中不可或缺的一环。前端同样需要测试，你的css改动可能导致页面错位、js改动可能导致功能不正常。你是不是还是拿着各种浏览器与设备来测试你的页面兼容性呢。
由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。前端自动化测试可以在几个方向进测试： 界面回归测试 功能测试 性能测试 页面特征检测。测试界面是否正常，这也是最基础的环境。
像素对比基本的思想认为，如果网站没有因为你的改动而界面错乱，那么在截图上测试页面应当跟正常页面保持一致。可以跟线上正常页面对比或者页面历史记录对比。像素对比能直观的显示图像上的差异，如果达到一定阈值则页面可能不正常。像素对比比较出名的工具PhantomCSS。
PhantomCSS结合了 Casperjs截图和ResembleJs 图像对比分析。单纯从易用性和对比效果来说还是不错的。感兴趣的同学可以去官方网站看看：https://github.com/Huddle/PhantomCSS
16 不仅仅只有console.log
对于js的调试，一般我们经常用alert()或者console.log()进行调试。但是alert()会让程序中断，而console.log()则不会。虽然用的很多，但是大部分只知道console.log()而已。
其实我们在调试过程中，我们还要尝试下使用console.dir(obj)方法用来对一个对象进行检查，并以易于阅读和打印的格式显示。
console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出,这些格式化的输出能让我们更容易定位发现问题。
17 使用debugger进行断点
做过后端的开发同学都明白如何断点调试以及断点调试的意义，前端如何断点调试呢？最简单直接的方法，就是在需要进行断点的地方加上debugger语句即可，打开谷歌浏览器就会自动在相应的位置添加断点，我们就可以很方便的查看相关变量的值。
18 使用EsLint进行检查
随着前端项目越来越复杂，多人开发同一个前端项目也越来越普遍，如何检查代码的规范性和语法次错误，显得就越来越重要，幸好有了Eslint的出现，EsLint帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。
EsLint提供以下支持：ES6 AngularJS JSX Style检查 自定义错误和提示。
EsLint提供以下几种校验：语法错误校验 、不重要或丢失的标点符号，如分号、没法运行到的代码块（使用过WebStorm的童鞋应该了解）、未被使用的参数提醒、漏掉的结束符，如}、确保样式的统一规则，如sass或者less、检查变量的命名，关于Eslint的详细用法请查看官方网站：http://eslint.org/
19.优雅高效的编写代码
虽然有了ES6，但是和JAVA,C#这些高级语言有一定的差距，如何运用高级语言的特性编写JavaScript,目前有两种选择：微软的TypeScript(http://www.typescriptlang.org/)和facebook的Flow(https://flow.org/)。
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件，扩展了它对于流行的库如 jQuery，MongoDB，Node.js 和 D3.js 的好处。
Flow是Facebook出品的一个JavaScript代码的静态类型检查工具，该工具采用开放源码的OCaml（Objective Caml）语言开发, 并遵守BSD开源协议发布，其代码托管在GitHub上。Flow能够帮助开发人员查找出JavaScript代码中的类型错误，从而提高开发效率和代码质量。Flow已经能够捕获JavaScript代码中的常见问题，如静态类型转换不匹配、空指针引用等问题。同时，Flow还为JavaScript新增了类型语法，如类型别名。
20.时刻保持学习的激情
前端日新月异，尤其是Nodejs的出现，不断有新的内容出现，我们就是要时刻关注前端最新的动态，时刻有一种学习的激情，这也是我们能做好前端开发的基础。建议大家去https://www.javascript.com/去学习基础的知识和最新的前端动态。
