假如你烘焙过蛋糕（哪怕没有亲身做过，然则也应当听说过），除了基础的面粉，鸡蛋等原材料外，也许你还须要一个电动蛋白打发器，一个烤箱。这是当代的做法，那末在打发器和烤箱发现之前，人们如何烤蛋糕呢？
没有打发器，只能手动打发，如许的弊病是不仅消费时候长，而且你的手能够也要废掉。没有烤箱，用炭烤，如许就会涌现温度不好控制，也许还得有人一向盯着的题目。
我一向爱把软件开辟想成做菜，原材料就是编程言语，菜单是算法逻辑，而做菜的这些东西也是我们在软件开辟中运用的种种东西。做菜的东西有汗青演化的历程，我们软件开辟的东西也是云云。
只是有些东西，如今被人人普遍运用，而有些却只能在一些老文章内里见证他们曾的光辉。本日就从前端东西演化来聊聊前端的汗青生长。
摸鱼正告：本篇没有干货，地道闲谈。
1：没有任何东西的纯手工时期
最最先的前端开辟，只须要控制HTML + CSS + JavaScript就好，我们要在一个页面上运用js，除了经由过程<script>…</script>标签外，还能够把js代码放到一个js文件，经由过程在HTML文件援用这个js文件的体式格局：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>然则，当我们的营业需求变庞杂，项目变大，我们平常会把逻辑相干的代码都放同一个js文件内里，如许逐步就形成了模块的观点，比方你在做一个超市收银体系，项目里有一个（或许几个）js文件是跟价钱盘算相干，有些js文件是跟时候花样化相干。如今你正在开辟收银小票功用模块，毋庸置疑，这个模块一定须要用到前面的价钱盘算和时候花样化模块。这里，就产生了模块接见模块的需求。
许多言语都自然地支撑在A文件内里援用B文件的功用，然则javaScript一最先却不是如许。由于javaScript一最先是被设想来只在浏览器（正确地说是用户的浏览器）上运转的言语。处于安全性的斟酌，它不被给予接见文件的权益和功用。
在这个阶段我们要做到在A文件运用B文件供应的功用，只能在HTML文件内里援用相干的js文件，经由过程在全局暴露相干变量，然后如许就可以运用到了。
2：包治理（package management）东西
在上面第一点我们提到了模块。在一个稍大的项目中，平常会用到许多前端社区已成熟的模块和框架。比方，特地用来处置惩罚时候花样题目的moment.js，之前能够会用到jQuery等。我们要在项目内里运用他们，得先找到他们在收集上的地点，把响应的文件下载下来，放到我们自身的项目某个目次，然后再在HTML文件内里援用响应的文件途径。
上面的做法很显然是存在效力和不方便的题目，在这类情况下前端的package management东西应运而生。
我们先来相识一下包治理东西为我们做了什么事：
1：帮我们从收集上下载依靠
2：治理依靠的版本
3：有的还具有task runner功用（npm）
这里就要提到几个包治理东西：
- bower
- npm
- yarn
bower和npm都是包治理东西，然则又有差别。如今人人听得最多，用的的多是npm，yarn，bower已差不多死掉了。
npm vs bower
npm(node package manager)本是nodejs用来治理node依靠的，然则厥后也被用于前端的依靠治理。
bower是只被用于治理前端的组件，比方html，css，js的东西，只用在前端。
在依靠构造上两者也不相同。bower是扁平的依靠树，须要用户治理依靠的依靠。而npm采纳的是嵌套的依靠树，不须要用户体贴依靠的依靠。
bower
bower init //建立bower.json
bower install jquery --save //装置jquery依靠
装置胜利以后会，bower会在当前目次下建立一个名叫bower_components/的文件夹。所以经由过程bower装置的依靠都邑放到这个目次下。比方上面的jquery装置胜利以后，我们能在bower_components/目次下获得jquery相干文件，然后我们就可以够在HTML文件内里援用了:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
npm也是相似的：
npm init //建立package.json文件
npm install jquery --save //装置jquery依靠
装置胜利以后会，npm会在当前目次下建立一个名叫node_modules/的文件夹。所以经由过程npm装置的依靠都邑放到这个目次下。比方上面的jquery装置胜利以后，我们能在node_modules/目次下获得jquery相干文件，然后我们就可以够在HTML文件内里援用了:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
3：Module bundler东西
在上面的第二点内里，我们运用了包治理东西，已不再须要我们自身手动去网上找依靠，下载到项目库里，然则想要运用，依旧须要在HTML文件内里逐一援用。我们要如何才能像别的言语一样在一个js文件内里援用别的一个js文件（模块）呢？
固然自从ES6(ES2015)最先，JavaScript已有这个功用了，我们能够经由过程import来引入，export来导出。然则在这之前，我们只能依靠Module bundler东西来做到这一点。
当时比较着名和盛行的一下2大解决方案：
- CommonJs – node.js, Browserify.js
- AMD(Asynchronous Module Definition)- Require.js
至今依然有许多人没有弄邃晓CommonJS和AMD都是一个协定规范，而不是一个详细的库。CommonJs的中心就是module(模块)，定义了JavaScript代码如何援用和导出代码。完成了CommonJs的最着名的就是node.js和Browserify.js，而对应的完成了AMD的比较是Require.js
人人都晓得node.js是运转在服务端的JavaScript，不属于我们本篇的领域，这里不讲。接下来我们来看看
Browserify.js
假如你翻开Browserify的官网，能够看到如许一句话：
Browserify lets you require(‘modules’) in the browser by bundling up
all of your dependencies.
Browserify供应require()要领在一个js文件内里引入别的一个js文件或许一个js文件export的变量。终究Browserify会依据依靠关联，把一切的js代码都整合到一个js文件里，也就是我们常说的bundle文件。以后就只须要在HTML文件内里援用这一个js bundle文件就好了。
接下来看看详细如何运用：
step1: 全局装置browserify
npm install browserify -g //全局安卓browserify
step2: 在module/目次下建立一个module.js，有以下示例代码：
function getSum(a, b) {
return a + b;
}
module.exports = getSum;step3: 建立main.js文件，在这内里运用module/module.js
var getSum = require('./module/module');
var sum = getSum(10, 10);
console.log('10 + 10 = ', sum);
step4: 应用browserify建立bundle文件：
browserify main.js -o build/bundle.js -d上面的敕令就是：browserify以main.js为源文件，天生bundle文件bundle.js，建立文件夹build/，并把bundle.js放到build/途径下。-o(-output)示意背面跟上输出文件途径， -d示意天生source map.
step5: 在HTMl文件内里引入上一步的bundle.js
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="build/bundle.js"></script>
</head>
<body></body>
</html>step6: 考证效果
10 + 10 = 20 //控制台获得我们正确地效果
4：task runner东西
前端的task能够会有：搜检代码花样，预编译，跑测试，紧缩代码，起server等。Task Runner就是根据用户自定义的使命流自动地完成一系列的task。
平常task runner东西自身并不详细详细实行某项使命的功用，而是每个使命都有响应的插件来完成。比方曾盛行过的grunt和gulp。
然则如今的前端项目也不会再用到grunt和gulp了。现如今，由于项目上平常会用到npm来做依靠治理，而npm自身的script就可以够用来run task, 如许也不必分外再多下一个分外的东西了。
