前端开发常用工具概念梳理

本文主要介绍前端开发中常接触到的一些常用工具的概念和涉及的语言规范，包括babel、ES6、webpack、gulp、npm。

1、babel：以前叫 6to5，转换器或者编译器。

       可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

2、ES6：ES2015=ES6，ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。

       因为当前版本的ES6是在2015年6月正式发布的，所以又称ECMAScript 2015，最常用的ES6特性let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments。简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

3、webpack：是一个现代的 JavaScript 应用程序的模块打包器(module bundler)，webpack集成了模块加载和打包等功能。

       能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理模块加载器兼打包工具，它是高度可配置的，但是，在开始前你需要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。Webpack已经能够满足大部分需求，我们将在此基础上加入Gulp.js，帮助我们完成更多任务（例如：单元测试、代码覆盖率检测、静态资源伺服）。

       平时一般是用requirejs、seajs作为模块加载用，用grunt/gulp作为前端构建。webpack作为模块化加载兼容了amd/cmd模式，并且作为模块化的资源可以是js/css/image  coffeescript/sass/less  ES2015 modles TypeScript 等功能非常强大，作为前端构建工具还可以和grunt/gulp配合一起使用。 配置文件webpack.config.js也是非常清晰。

4、gulp：是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

      与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。

5、npm：NPM(node package manager),作为node的包管理工具。是随同NodeJS一起安装的包管理和分发工具。

       它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。
1）允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2）允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3）允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

6、JavaScript由3部分组成：
   1)核心(ECMAScript)：由ECMA-262定义，提供核心语言功能；
   2)文档对象模型(DOM)：提供访问和操作网页内容的方法和接口；
   3)浏览器对象模型(BOM)：提供与浏览器交互的方法和接口。