从vue引出的前端基础概念梳理--JavaScript、ES6、node、npm、webpack、CommonJS

      在使用vue框架时，我们会发现其涉及到node、npm、webpack、ES6和CommonJS，刚开始学习这些知识时我也是一脸懵逼，我只是想用vue做开发，为什么会引来这么多的东西，没有这些东西我就不能使用vue做开发了吗？本文对涉及到的这些前端基础知识以及它们之间的关系进行整理，让前端入门人员可以对它们有初步的认识，在后面的学习中可以更好理解和上手。

JavaScript

      JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”（script language），指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览器）的“脚本”。
      JavaScript 也是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O（输入/输出）相关的 API，都要靠宿主环境（host）提供，所以 JavaScript 只合适嵌入更大型的应用程序环境，去调用宿主环境提供的底层 API。
      目前，已经嵌入 JavaScript 的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器环境，也就是 Node 项目。
      JavaScript 的发明目的，就是作为浏览器的内置脚本语言，为网页开发者提供操控浏览器的能力。它是目前唯一一种通用的浏览器脚本语言，所有浏览器都支持。它可以让网页呈现各种特殊效果，为用户提供良好的互动体验。

ES6

      ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
      ES6 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。

node

      前文介绍javascript时已经提到，javascript需要运行在宿主环境中调用宿主环境提供的底层API，node就是其中的一种宿主环境。
      node官方对其的解释是：node.js是一个基于 Chrome V8引擎的JavaScript运行环境。

npm

      我们发现用到node环境的地方，都会出现npm这个名词，那么npm是干什么的？npm是node.js的包管理器，它为javascript开发人员提供了一个集中管理工具，开发人员可以将自己开发的代码包上传到npm的官网，npm通过注册表来维护每个包的信息，其他开发人员可以很方便的使用npm的指令下载和解压需要使用的代码包，无需关注每个包的依赖包，npm在下载时会自动将依赖包下载并管理起来，解放双手！
      在安装node时会自动安装好npm，在命令行通过

npm -v

即可查看npm是否安装。在项目初始，可以执行

npm init -y

生成一个pakeage.json文件，这个文件中会记录项目中使用的包以及版本，实现项目的依赖版本管理，此后新增/更新的包都会记录在这个文件中，增加项目的移植性。项目需要添加某个依赖包时执行

npm install 包名

即可。

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

webpack主要有以下功能：

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等浏览器可以识别的格式/类型。
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器，提升开发效率。

在前端项目中，通过webpack.config.js(默认使用此文件名)来控制webpack编译打包相关的配置，具体配置这里不赘述。

CommonJS

      前文讲了这么多概念，似乎一直没提到CommonJS，那么CommonJS是什么，跟前文提到的一些概念有什么关系？
      看过webpack配置文件的同学应该会发现webpck的配置文件中会使用到很多require和export关键词，而vue文件中则频繁使用的是import和export，我们知道这几个关键词是用于导入和导出模块，模块是什么？为何会有这种差异？这就涉及到模块化和CommonJS规范了。

• 模块化

      模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块，可以很好的解决命名冲突等各种问题。

      但是模块开发需要遵循一定的规范，因此诞生了CommonJS、AMD、CMD和ES6等模块化规范。

• CommonJS规范

      node.js是基于CommonJS规范的，CommonJS是模块化的规范之一。

根据commonjs规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象

使用方式：

// 导入
require("module");
require("../app.js");
// 导出
exports.getStoreInfo = function() {};
module.exports = someValue;

CommonJS使用require加载模块时是使用同步加载的方式，是专门为服务器端设计的模块化规范，不适用于浏览器端。

• AMD规范
        如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范，require.js即基于AMD规范。

AMD 即Asynchronous Module Definition，中文名是“异步模块定义”的意思，它采用异步方式加载模块，模块的加载不影响它后面语句的运行，所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行

使用方式：

// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...});
// 加载模块
require(["module", "../app"], function(module, app) {...});

使用AMD规范可以实现在浏览器端异步加载多个模块，并且可以并行加载，但是其存在代码阅读和书写困难、开发成本高等问题。

• CMD规范
        CMD跟AMD相似，也是采用异步加载模块的方式。它们的区别是：CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入回调函数中。
  使用方式：

define(function(require, exports, module) {
  var a = require('./a');
  a.doSomething();
  // 依赖就近书写，什么时候用到什么时候引入
  var b = require('./b');
  b.doSomething();
});

sea.js即使用了CMD规范。

• ES6规范
        ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。commonjs和AMD模块，都只能在运行时确定这些东西。比如，commonjs模块就是对象，输入时必须查找对象属性。

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

使用方式：

// 导入
import "/app";
import React from “react”;
import { Component } from “react”;
// 导出
export function multiply() {...};
export var year = 2018;
export default ...
...

      node的默认模块格式是CommonJS，目前还没决定怎么支持ES6模块。所以，只能通过Babel这样的转码器，在Node里面使用ES6模块。

总结

      通过前文中对基本概念的介绍，相信大家已经大概理解这些概念和vue之间的关系了：vue是基于ES6的JS框架；ES6是JavaScript的一套标准规范；webpack可以对前端项目进行编译、压缩和打包，webpack是使用node开发，运行在node环境中的一个工具；node遵循CommonJS规范；npm是node的包管理器。
      本质上vue不依赖node、webpack、npm等，但是在实现前端工程化的进程中，这些技术可以让开发人员将更多的注意力放在代码编写中，不再过多的关注兼容性、规范化、编译打包甚至依赖版本管理等，很大地提升了开发效率。