一:前端框架
-
Vue
-
React
-
AngularJs
二:模块管理工具
浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。
为了解决这个问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来所有的前端JavaScript项目，应该都会采用这种方式开发。
-
Require.js
最早也是最有名的前端模块管理器，非RequireJS莫属。它采用AMD格式，异步加载各种模块。具体的用法，可以参考我写的教程。Require.js的问题在于各种参数设置过于繁琐，不容易学习，很难完全掌握。而且，实际应用中，往往还需要在服务器端，将所有模块合并后，再统一加载，这多出了很多工作量。
是一种在线“编译”模块的方案，相当于在页面加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西，也就实现了模块化。
-
Brower
Bower的主要作用是，为模块的安装、升级和删除，提供一种统一的、可维护的管理模式。
-
Browserify
Browserify本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它，我们可以使用Node.js的npm模块管理器。所以，实际上，它等于间接为浏览器提供了npm的功能。
是一种预编译模块的方案，相比较上面，这个方案更加智能。没用过 browserify，这里以 webpack 为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写 JS ，不管是 AMD/CMD/ES6 风格的模块化，它都能认识并且编译成浏览器认识的 JS。(此处同Webpack)
-
Component
Component是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想，是将网页所需要的各种资源（脚本、样式表、图片、字体等）编译后，放到同一个目录中（默认是build目录）。
-
Duo
Duo是在Component的基础上开发的，语法和配置文件基本通用，并且借鉴了Browserify和Go语言的一些特点，相当地强大和好用。
-
Webpack
Webpack 是前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过 loader 转换，任何形式的资源都可以当做模块，比如 CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS 等。
是一种预编译模块的方案，相比较上面，这个方案更加智能。没用过 browserify，这里以 webpack 为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写 JS ，不管是 AMD/CMD/ES6 风格的模块化，它都能认识并且编译成浏览器认识的 JS。(此处同Browserify)
三:构建工具
-
Gulp/Grunt
Gulp / Grunt 是一种构建工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。
四:JS服务运行
-
Node.js(npm包管理工具)