摘要：在这种背景下，诞生了很多工具很多前端工作流程。目前我们很多时候常说的前端工程师，其实主要指的就是其工程师。所以就是来解决这些问题的最后至此前端的一个工作结构介绍至此结束。
这个时代不懂点前端知识，真的没有办法生存。就算不会写，也得了解它的原理吧！
最近做了一些总结，之前都是迷迷糊糊，搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。
本文主要说的是 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就是来解决这些问题的
最后至此前端的一个工作结构介绍至此结束。再瞎逼逼两句，学习是一件持续的事情，在学习某个新东西前，先要对它是干吗的，它解决一个什么样的问题有个认识，然后面对知识你才能在自己的脑海中建立一个体系。
参考了很多资料，贴在这里供参考:
[1] 我们为什么需要Webpack？
[2] Vue 对比其他框架
[3] Webpack、Browserify和Gulp三者之间到底是怎样的关系？
[4] Babel-转码器
[5] 用自动化构建工具增强你的工作流程！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82319.html
摘要：项目前端工程化的探索不通过层实现非网页开发的前后端分离。做过这样项目的各位攻城狮应该都知道有多痛苦吧。仔细想来，其实只是想要模板和静态资源，我们可以直接在目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源到工程的相应目录下。 Django项目前端工程化的探索 不通过node层实现非SPA网页开发的前后端分离。 技术栈：webpack + jade + es6 + scss +...
摘要：项目前端工程化的探索不通过层实现非网页开发的前后端分离。做过这样项目的各位攻城狮应该都知道有多痛苦吧。仔细想来，其实只是想要模板和静态资源，我们可以直接在目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源到工程的相应目录下。 Django项目前端工程化的探索 不通过node层实现非SPA网页开发的前后端分离。 技术栈：webpack + jade + es6 + scss +...
摘要：项目前端工程化的探索不通过层实现非网页开发的前后端分离。做过这样项目的各位攻城狮应该都知道有多痛苦吧。仔细想来，其实只是想要模板和静态资源，我们可以直接在目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源到工程的相应目录下。 Django项目前端工程化的探索 不通过node层实现非SPA网页开发的前后端分离。 技术栈：webpack + jade + es6 + scss +...
摘要：项目前端工程化的探索不通过层实现非网页开发的前后端分离。做过这样项目的各位攻城狮应该都知道有多痛苦吧。仔细想来，其实只是想要模板和静态资源，我们可以直接在目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源到工程的相应目录下。 Django项目前端工程化的探索 不通过node层实现非SPA网页开发的前后端分离。 技术栈：webpack + jade + es6 + scss +...
摘要：前端性能优化的涉及点从服务器到协议再到宿主环境本身都要有比较深刻的认识，业界目前主要还是以雅虎总结出来条前端性能优化的黄金军规为参考。 欢迎大家前往腾讯云技术社区，获取更多腾讯海量技术实践干货哦~ 导语 : 从事前端有6年+的时间了，从最开始的美工到重构再到偏向js逻辑开发的前端开发，一直在前端这个行业里面摸索和学习，我现在将自己这些年的一个心得体会来个系统性的梳理写成一篇关于性能优化...
阅读 2714·2021-09-24 09:47
阅读 4364·2021-08-27 13:10
阅读 2979·2019-08-30 15:44
阅读 1279·2019-08-29 12:56
阅读 2592·2019-08-28 18:07
阅读 2611·2019-08-26 14:05
阅读 2548·2019-08-26 13:41
阅读 1263·2019-08-26 13:33
