Javascript前端工程化工具 | 天一阁

Javascript前端工程化工具

Javascript前端工程化

安利一下udemy上的这门课Object-oriented Programming in JavaScript,让我明白了很多困扰我很久的概念。

我没正规做过前端开发,连现在所谓的web后台开发都没做过,这是我始终进展很慢的原因之一。因为别人提到的技术实现,我根本看不懂,即使是花钱,也没法判断投入的是否合理。

我个人的经历与前端开发、javascript简直就是平行空间,就想和现在的邻居,虽然都生活距离很近,但貌似谁也不了解对方的状态。

javascript的标准叫ECMAScript,99年出版的ES3,我可能看过一点,但是那个时候觉得MFC牛逼,甚至操作系统、汇编才牛逼,就压根不喜欢看和界面有关的一切技术。没想到差不多到现在界面技术反而前后通吃了,而且更容易做一个产品出来,后台技术只能做幕后英雄了。ES5是2009年发布的标准,2015年大佬们又发布了ES6,也就是ECMAScript 2015,估计未来还会有ES7,ES8,ESX。。。

随着对用户体验要求越来越高,前端代码肯定越来越复杂,大佬们希望通过更多的语言特性,使前端开发更加工程化。工程化有啥内涵,我也不是很了解,但至少现在能看到的就是模块化,然后提供更便利的工具。

Module 模块化

据说以前js是没法模块化的,后来引入模块化,但是还有很多不同的标准。

1,CommonJS

CommonJS是为了给非浏览器环境下,js模块化的规范,我的理解这就是一套API规范,免得不同的js实现在不同的后端引擎中,需要写不同的代码。其中node.js就是实现了一些全局对象,如module、exports、require等来实现模块化的代码加载。

2, ES6 Class

ES6 class这种方式是浏览器支持的模块化加载模式,但是除了js需要用到一些新的语法,比如class, export, import ,在html里面加载脚本时,也需要一点变化,比如:

1
<script type="module" src='modtest.js'></script>

工程化工具

js这个语言我觉得很怪异,自称为动态语言,很多时候会方便。但有时有感觉明显就是从非主流要往主流上靠,但是天生有缺陷,就用到各种变通的方式,让自己很像主流的方式和行为。比如说他的继承,使用过一个prototype的属性,一层层链接上去的。

所以为了解决很多天然的问题,于是就产生了大量的工具。

  1. Node.js

Node.js当然不是为了工程化而诞生的。但是很多工具都依赖Node。Node主要是提供了可以在Linux shell下面执行Js脚本的解释器。同时他还提供了一个npm,不明白为啥这个包管理器也放在node里面。有了Node和npm,使js以工程化方式进行开发提供了基础。

  1. Babel

Babel是一个转化和编译工具。目前浏览器对ES6支持还不够好,所以用新的语言特性去开发时,可能很多浏览器都会报错,于是就有了Babel,他可以把所有ES6的语言特性转换为ES5,这样就不会让浏览器难为程序员了。Babel是2015年开发的,很明显这是ES6标准出来后,为了解决兼容性问题,而出现的一个工具。这个目前也是前端工程化中比较重要的工具了。

  1. Webpack

Webpack第一次发布在2012年,主要是前端工程化工具,可以把多个js模块打包成一个js文件,这很像是c语言编程成很多个.o之后,有个linker工具把.o拼在一起变成一个可执行文件。

Webpack和Babel都是在node环境下工作的,无聊的时候其实可以去看看这些js代码,看看他们到底干了些啥。这些概念清楚一些了,再去看vue也许会更加清醒一些,不想之前那样,真的快疯了。但愿明天能更好吧!