前端工具演变

2019-04-18 admin

假如你烘焙过蛋糕(哪怕没有亲自做过,但是也应该听说过),除了基本的面粉,鸡蛋等原材料外,或许你还需要一个电动蛋白打发器,一个烤箱。这是现代的做法,那么在打发器和烤箱发明之前,人们怎么烤蛋糕呢? 没有打发器,只能手动打发,这样的弊端是不仅花费时间长,而且你的手可能也要废掉。没有烤箱,用炭烤,这样就会出现温度不好掌握,或许还得有人一直盯着的问题。

我一直爱把软件开发想成做菜,原材料就是编程语言,菜单是算法逻辑,而做菜的这些工具也是我们在软件开发中使用的各种工具。做菜的工具有历史演变的过程,我们软件开发的工具也是如此。

只是有些工具,现在被大家广泛使用,而有些却只能在一些老文章里面见证他们曾经的辉煌。今天就从前端工具演变来聊聊前端的历史发展。

摸鱼警告:本篇没有干货,纯粹闲聊。

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都是包管理工具,但是又有不同。现在大家听得最多,用的的可能是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工具本身并不具体具体执行某项任务的功能,而是每一个任务都有相应的插件来完成。例如曾经流行过的gruntgulp

但是现在的前端项目也不会再用到grunt和gulp了。现如今,因为项目上一般会用到npm来做依赖管理,而npm自己的script就可以用来run task, 这样也不用额外再多下一个额外的工具了。

[转载]原文链接:https://segmentfault.com/a/1190000018910843

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-62132.html

文章标题:前端工具演变

相关文章
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
图片优化的那些工具
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、im...
2016-01-13
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
JavaScript开发工具
常用的有sublime,webstorm,notepad++等 ...
2015-11-12
五款超实用的开源SVG工具
本文我们将分享5款超实用的开源的SVG工具:   1. SharpVectorGraphics (SVG)   SVG是基于Microsoft .Net开源项目设计而来,是建立在.Net framework上使用SVG的一款应用,支持生成、...
2016-01-13
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
15个提高编程技巧的JavaScript工具
JavaScript鑴氭湰搴撴槸涓€涓�棰勫厛鐢↗avaScript璇�瑷€鍐欏ソ鐨勫簱锛屽畠鏂逛究浜嗘垜浠�寮€鍙戝熀浜嶫avaScript鐨勫簲鐢ㄧ▼搴忥紝鐗瑰埆閫傚悎AJAX鍜屽叾浠栦竴浜涗互Web涓轰腑蹇冪殑鎶€鏈�銆侸avaScr...
2015-11-12
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
回到顶部