这个时期不懂点前端学问，真的没有办法生计。就算不会写，也得相识它的道理吧！
近来做了一些总结，之前都是模模糊糊，搞不清楚前端之前的相干定位。好好梳理了一下。缺点的处所请列位斧正。
本文重要说的是 JavaScript 事变流程
现在前端真的该叫大前端，其愈来愈细化，愈来愈庞杂。在这类背景下，诞生了许多东西许多前端事变流程。比方热点的：
react
vue
webpack
babel
gulp
node.js
npm
nvm
angular
bower
… …
假如继承写，预计光这个，字数久能够到达1000+
这里边有的是前端js框架，有的是一些开辟东西，但他们品种这么多，各自能够处置惩罚什么题目？相互之间有什么联络？是否是一个项目就必须用上这么多东西？运用时刻，如何相互配合？
带着这些疑问，作为一个后端顺序员，举行了系列观察，要把我的效果分享出来（能够缺点百出）。
起首前端开辟的三大基础：
html这个是最基础的，被称为：超文本标记言语。什么意思？简朴来讲就是形貌一个页面的构造，比方：页面的头部，页面的内容，页面的尾部。也就说，它掌握一个页面的构造。浏览器会根据它定义的构造来举行剖析，显现差别内容。css我们对美的寻求是无止境的，光有构造，看起来没有颜色，有些处所不凸起。就像衣服：原始人用树恭弘=叶 恭弘、兽皮，跟着进步，我们穿丝绸、破洞牛仔，搭配丝巾、腕表等等，所以就是用来掌握html的款式，让它变的更悦目。JavaScript这是本文重要论述的处所，有了html+css，明显还不能满足我们的寻求，会html、css的人不能叫做前端工程师、更不能叫顺序媛。然则假如你会了 JavaScript，江湖就有你的模糊之地，这也是本文重要引见的部份。
现在我们许多时刻常说的前端工程师，实在重要指的就是其 js工程师。在Web天下里，只要JavaScript能跨平台、跨浏览器驱动网页，与用户交互。
功用越壮大，义务也越多。现在 js（背面悉数运用简称，字太多，不想写）运用的愈来愈多，初期 js 仅仅用来做一些简朴的交互，跟着现在挪动互联网的生长，各项硬件装备的机能提拔。项目愈来愈庞杂，效果愈来愈酷炫。js 做的事变也更多。
固然本日不讲这么多生长汗青（关键是我也没理清呀），总的来讲就是 js 开辟事变本来比较简朴，人人随意写写久搞定事变了，然则现在事变的庞杂度愈来愈高，像之前那末率性的事变，开辟贫苦、保护贫苦。还好具有顺序员三大美德人，最先构建一些东西。
Perl言语的发明人Larry Wall说，好的顺序员有3种美德： 懒散、浮躁和狂妄（Laziness, Impatience and hubris）。
懒散：
是如许一种质量，它使得你花大气力去防止斲丧过量的精神。它催促你写出节约膂力的顺序，同时他人也能应用它们。为此你会写出完美的文档，以避免他人问你太多题目。
浮躁：
是如许一种气愤—-当你发明计算机懒洋洋地不给出效果。因而你写出更优异的代码，能尽快真正的处置惩罚题目。最少看上去是如许
狂妄：
极端的自信，使你有自信心写出（或保护）他人挑不出缺点的顺序
先是人人觉得js代码复用是个题目，我们想用他人写的某个功用，只能网上去翻他人写的源码，拷贝下来。后段言语都有本身的包治理东西，比方：java的maven，python的pip，php的composer等。因而在汗青的使命招呼中，npm诞生了，js的包治理东西。
比方之前要运用 jquery，你的到官网去下载，现在 npm install jquery 就能够了。
npm是运转在node的环境上，它们的关联又是别的一个话题，这里按下暂且不表。
像 react、vue都能够经由过程npm来装置。
包治理的题目处置惩罚了，接下来又有别的一个题目，因为 js 是 Brendan Eich 这老大花了 10 天时候设想的（牛人就是这么屌）。虽然现在广泛应用，也因为时候紧致使留下了许多设想缺点。
陪伴了 ES6 的宣布，js愈来愈范例了，我们顺序员一定都想用好用的简约的语法来完成使命，好早点放工回家打lol呀。惋惜呀，天下上成百上千万的网站，不能够一会儿悉数晋级，浏览器也不能够立马就支撑最新语法，如何办？babel 诞生了，它牛逼在那里？让你能够用es6的语法写代码，然后在现在的环境下能够运转（在这里请自行疏忽ie9以下浏览器）。
在你用es6写完代码后，用它转码一下，能够取得es5的代码。不信？来个例子：
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});上面的原始代码用了箭头函数，Babel 将其转为一般函数，就能在不支撑箭头函数的 JavaScript 环境实行了。
别的 babel 实在也是用js写的一个东西，所以它照样能够经由过程 npm install babel-cli 来装置。
关于它如何用，本身看官方文档。
好。到现在为止，处置惩罚了两个大题目。接着看前端另有什么题目？那末在开辟中另有什么题目须要处置惩罚？兼并文件、紧缩代码、搜检语法缺点、将Sass代码转成CSS代码等等这些都是开辟中的重复性使命，之前这些使命都须要零丁人工处置惩罚，然后为了进步效力，早点放工，就有了:Gulp Grunt这些task runner。引荐运用gulp来自动化的实行这些使命。
那末到了这里，是否是就停止了？还没有，现在的基础都考究什么前后端星散，也就是变成了web app的体式格局，那末就要求页面从新加载要变少，用户交互要变多，也就致使一个页面上js愈来愈多。这么多的js如何治理？如何进步浏览器的加在速率？可否将css img html 字体这些资本也当做模块来处置惩罚？在这些题目下，产生了许多模块打包东西，毫无疑问：webpack是最刺眼的，也是用起来最爽的。
所以模块打包的题目也处置惩罚了，别的说一句，gulp的部份功用能够经由过程webpack的插件也能处置惩罚，但并不意味着不再须要它，一般来讲gulp运转在webpack以后。
再次声明，上面一切引见的东西，都能够经由过程npm来装置取得。所以说究竟它们都是用js写的一个东西。
ok，那末东西基础引见完了，究竟页面如何显现给用户？背景传过来的数据如何绑定到dom里边去？假如向背景提议要求取得数据？等等，这些须要一个js营业框架来完成。所以react、vue就是来处置惩罚这些题目的
末了
至此前端的一个事变构造引见至此完毕。再瞎逼逼两句，进修是一件延续的事变，在进修某个新东西前，先要对它是干嘛的，它处置惩罚一个什么样的题目有个熟悉，然背面临学问你才能在本身的脑海中竖立一个系统。
参考了许多材料，贴在这里供参考:
