不要被npm、NodeJs、npm、webpack、vue-cli 这些名词搞晕

这些年前端技术飞速发展、日新月异各种前端技术层出不穷。对于一些不太关心技术更新或者主要是后端code的程序来说，今年很多名称把人搞得 一塌糊涂。比如：NodeJs、npm、webpack、vue-cli等等。今天我就来尝试解开这些名词华丽的外衣。

稍微会议下历史：

 　　在web1.0时代，期初用户主要是通过网页获取（浏览）信息。前后端技术没有太多的统一标准。印象比较深的是asp网页：前端也比较死板：table布局，css层叠样式都还不太普及。

　　后来，用户需求增加了：加入了动态网页，比如：那时流行的asp技术，在页面htm内容中插入<%后端动态业务code%>;

 　　在往后随着网页的流行，用户的需求有又增加了：用户需要和网页进行交互（这里指前端交互）。1995年sun公司推出更名后的Java语言并大肆宣传：一次编写、到处 运行。网景公司大胆的做了一次尝试：将java以applet（小程序，并非非微信小程序哈）直接在浏览器中运行，并计划将java作为脚本语言嵌入网页，试图让网页动起来。这就是JavaScript的原始需求。

　　1995年4月 任职于网景的Brendan Eich设计出了前端Javascript语言，这里要提的是JavaScript和java并没有太多的关系。硬要说有关系，那这个可能就是最大的关系：JavaScript是在网景公司和java合作后研发出来的吧~JavaScript之父本人对java并不感兴趣。

　　毕竟有java的合作，JavaScript或多或少也要首一些影响，其中不乏负面影响。比如：

js中Date类型，有了 getYear方法后 后面有扩展追加了 getFullYear，因为getYear就是来自java思想的糟粕。

So，有人这样说JavaScript： the part that is good is not original, and the part that is original is not good.　　

　　再后来，随着互联网技术以及JavaScript自身的发展JS在程序员中取得了举足轻重的位置；比如：dom操作、ActiveXObject、query、ajax、vue等等。

　　直到有一天，有一个名叫nodeJS的运行环境横空出世。

　　在这之前JavaScript，在绝大多数程序员中一直被当做网页前端技术来使用。这时期很多前端都有这个特点：会写界面样式会处理兼容问题单就是对JavaScript不太了解。

　　2009年，同样是5月：基于 Chrome V8 引擎的 JavaScript运行环境nodeJS(书面叫node.js)横空出世。从此JS向广大程序员宣告：js涉足服务器端开发。什么是服务器端？在BS架构中，用户通过浏览器（之前js一直被有用在浏览器中提供用户交互功能等）访问服务器端的程序，然后服务器端根据访问请求生成不到的响应最终渲染展示到客户端。也就是说从此以后JavaScript可以像java、C#、perl、php等一样可以编写在服务器端运行的程序，或者就是一个单机客户端（这里的客户端和 ‘服务器-客户端’中的客户端是两个意思）运行程序。

　　从此JavaScript的应用和发展有了质的提升。

 　　什么？你对nodeJS还是有点晕。那在直白的介绍一下吧：nodeJs对于JavaScript ，就像安装了JDK我们就可以用java开发应用、就像安装了.net Framework我们就可以用C#开发应用；同理安装了nodeJS我们就可以用JavaScript语音来开发应用和程序，牛皮不？

      1、提到nodeJS就必须不得不想到模块化编程（exports、require）。

// 定义一个 tools.js 的模块
//模块定义
var  tools = {
sayHello:  function() {
return  'hello NodeJS';
},
add:  function(x, y) {
return x + y;
}
};
// 模块接口的暴露
// module.exports = tools;
exports.sayHello =  tools.sayHello;
exports.add =  tools.add;

var  http  =  require ( 'http');
// 引入自定义的 tools.js 模块
var  tools=  require ( './ tools'); ;
tools.sayHello(); //使用模块

　　2、将一个模块或多个模块组成一个完整的功能，就是一个包。公用性或在可用性可能强的包可以发布到包管理服务器，提供后续反复使用或提供给其他开发人员使用。包的安装需要用的包管理器npm（Node Package Manager node），它在安装nodeJS时就自动安装了。

- 包结构
		bin
			- 二进制的可执行文件，一般都是一些工具包中才有
		lib
			- js文件
		doc
			- 文档
		test
			- 测试代码
		package.json
			- 包的描述文件
			
	- package.json	
		- 它是一个json格式的文件，在它里面保存了包各种相关的信息
			name 包名
			version 版本
			dependencies 依赖
			main 包的主要的文件
			bin 可执行文件

　　3、我们通过包管理器可以安装各自需要的功能包，

- npm（Node Package Manager node的包管理器）
	- 通过npm可以对node中的包进行上传、下载、搜索等操作
	- npm会在安装完node以后，自动安装
	- npm的常用指令
		npm -v 查看npm的版本
		npm version 查看所有模块的版本
		npm init 初始化项目（创建package.json） 注：json文件中不能写注释
		npm i/install 包名 安装指定的包
		npm i/install 包名 --save 安装指定的包并添加依赖
		npm i/install 包名 -g 全局安装（一般都是一些工具）
		npm i/install 安装当前项目所依赖的包（由项目中的package.json指出）
		npm s/search 包名 搜索包	
		npm r/remove 包名 删除一个包

　　4、由于存放包的服务器在国外，国内访问很慢，所以taobao团队定期从国外包服务器上获取包信息，并存放到阿里自己服务器上，这样国内访问就很快，成为淘宝镜像的npm；如上所述我们要安装淘宝镜像包就要使用npm install 命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

通过npm下载的包都放到node_modules文件夹中 我们通过npm下载的包，直接通过包名引入即可 node在使用模块名字来引入模块时，它会首先在当前目录的node_modules中寻找是否含有该模块 如果有则直接使用，如果没有则去上一级目录的node_modules中寻找 
如果有则直接使用，如果没有则再去上一级目录寻找，直到找到为止 直到找到磁盘的根目录，如果依然没有，则报错

　　其外我们还可以安装其他包，不如vue-cli

cnpm install --global vue-cli
这里我们的安装就把当做是安装了一个应程序，然后我们通过通过命令行操作这个程序，比如通过vue init myweb 是通过vue初始化创建一个项目，项目名叫myweb；当然更多人这样做：vue init webpack anotherweb ，则是通过基于webpack去初始化创建一个vue项目

有了包管理，就方便全世界程序员（组织、公司）贡献自己的作品，其中就包括上文提到的一个角色：webpack。至于webpack的具体用户我后文在介绍，总之webpack就是nodejs的一个产品（可以把看作是一个软件），主要是 一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

　　好了，本文到此。如此看来nodejs是不是没那么可怕了，npm、webpack、vue-cli这些是不是也 不是那么茫然了。