Node.js入门级用法，一些简单介绍与应用

一、Node.js基础

1.1、简介

简单的说Node.js就是运行在服务端的JavaScript。

Node.js是一个基于Chrome JavaScript运行时建立的一个平台，是一个事件驱动I/0服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快, 性能非常好。

1.2、安装

1.2.1、下载对应你系统的Node.js版本:

https://nodejs.org/en/download/

1.2.2、选安装目录进行安装

推荐下载LTS版本。完成以后，在控制台输入:

二、简单使用

2.1、模块化编程

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

（导出）

每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性 (即module.exports) 是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

（引入）

2.2、简单创建 Nodejs Web服务器

2.2、处理 Nodejs Web请求参数

2.2.1、步骤

① 创建web服务器。

② 引入ur|模块。

③ 利用url解析请求地址中的参数和值。

2.2.2、代码

三、包资源管理器NPM

3.1、概念

● npm全称Node Package Marjager，是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven。

● 通过npm可以很方便地下载js库,管理前端工程。

● 现在的node.js已经集成了npm工具，在命令提示符输入npm -V可查看当前npm版本

3.2、npm初始化

● init命令是工程初始化命令。

● 建立一个空文件夹或者在上述的示例工程中，在命令提示符进入该文件夹执行命令初始化。

按照提示输入相关信息，

name:项目名称。

version:项目版本号。

description:项目描述。

keywords: {Array}关键词，便于用户搜索到我们的项目。

● 最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml之后也可以根据需要进行修改。

3.3、本地安装

3.3.1、局部安装

install命令用于安装某个模块，可以通过require引入到项目中使用。如我们想安装express模块(node的web框架)，输出命令如下:

● 出现警告信息，可以忽略，已经成功执行了该命令。

● 在该目录下已经出现了一个node_modules文件夹和package-lock.json。

● node_modules文件夹用于存放下载的js库(相当于maven的本地仓库)

● package-lock.json是当node_ modules或package.json发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新(可能存在切换了不同的镜像源后，同一个大版本号下可能出现兼容问题，package lock可以保证即使换了源，下载的文件和原来的可以保持一致)。再打开package.json文件，发现刚才下载的express已经添加到依赖列表中了。

3.3.2、关于版本号定义

● 指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。

● 波浪号(tilde) + 指定版本：比如 ~1.2.2 ，表示安装1.2.x 的最新版本(不低于1.2.2)，但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。

● 插入号(caret) + 指定版本：比如 ^1.2.2，表示安装 1.x.x 的最新版本(不低于1.2.2)，但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

● latest:安装最新版本。

3.3.3、全局安装

● 本地安装会将js库安装在当前目录，而使用全局安装会将库安装到全局目录下。全局安装之后可以在命令行使用该安装的模块对应的内容或命令。

● 如果不知道全局目录在哪里，执行命令查看全局目录路径

比如全局安装jquery，输入以下命令

3.3.4、批量下载

从网上下载某些代码，发现只有package.json，没有node. modules文件夹，这时需要通过命令重新下载这些js库，进入目录(packagejson所在的目录)输入命令。

此时，npm会自动下载package.json中依赖的js库。

3.3.5、切换NPM镜像

有时使用npm下载资源会很慢，所以可以切换下载的镜像源。或者安装一个cnmp(指定淘宝镜)来加快下载速度。

①切换镜像源的（可以使用一个工具: nrm）

首先安装nrm，这里-g代表全局安装

然后通过 nrmls 命令查看npm的仓库列表，带*的就是当前选中的镜像仓库:

nrm use taobao

②使用cnpm的方式

安装cnpm，输入如下命令

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

安装后，我们可以使用以下命令来查看cnpm的版本



使用cnpm

3.3.6、运行工程说明

如果想运行某个工程，则使用run命令

如果package.json中定义的脚本中有：

● dev是开发阶段测试运行

● build是构建编译工程

● lint 是运行js代码检测

运行时命令格式:

3.3.7、编译工程说明

编译后的代码会放在dist文件夹中，进入命令提示符输入命令

生成后会发现只有个静态页面，和一个static文件夹

这种工程我们称之为单页Web应用(single page web application, SPA)，就是只有一张Web页面的应用， 是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

这里其实是调用了webpack来实现打包的。

四、Webpack入门

4.1、概述

Webpack是一个前端 资源加载/打包 工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack.js

从图中我们可以看出，Webpack 可以将多种静态资源js.css等转换成一个静态文件，减少了页面的请求。接下来简单为大家介绍Webpack的安装与使用。

作用：可以将多个静态资源js、css等打包成一个js文件。

4.2、安装

● 全局安装

npm install webpack -g

npm install webpack-cli -g

如果安装失败;则将全局目录下的webpack的相关文件夹删除再执行上述命令

● 安装后查看版本号

4.3、webpack打包js

4.3.1、步骤

① 创建2个js文件。

② 创建入口文件main.js。

③ 创建webpack的配置文件。

④ 运行webpack命令。

⑤ 创建index.htm|页面进行测试。

4.3.2、案例

① 创建2个js文件。

② 创建入口文件main.js。

③ 创建webpack的配置文件。

以上代码的意思是:读取当前目录下src文件夹中的main.js (入口文件)内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的is文件名为bundle.js。

④ 运行webpack命令。

在当前文件夹下用管理员身份启动cmd，输入以下命令：

⑤ 创建index.htm|页面进行测试。

4.4、webpack打包css

4.4.1、环境搭配

● Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。

● Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样就可以通过require来加载任何类型的模块或文件，比如CoffeeScript、JSX、LESS 或图片。首先需要安装相关Loader插件，css-loader 是将css装载到javascript，style-loader 是让javascript认识css。

● 安装style-loader 、 css-loader组件，创建并使用CSS文件，使用webpack命等打包js文件到dist/bund1e.js

cnpm install style-loader css-loader --save-dev

-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。 运行npm install

–production或者注明NODE_ ENV变量值为production时，会自动下载模块到node_modules目录中。

-save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。运行npm install -production或者注明NODE_ENV变量值为production时，不会自动下载模块到node.modules目录中。

4.4.2、实现步骤

① 安装转换css的组件。

② 修改webpack.config.js配置文件。

③ 创建Css文件。

④ 修改入口文件，加载css文件。

⑤ 打包并测试。

4.4.3、案例

修改webpack.config.js配置文件：

在src文件夹创建css文件夹，css文件夹下创建css1.css：

修改入口文件，加载css文件：

测试：

五、ES6概述&创建测试工程

5.1、概述

● 编程语言javaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA (一个类似W3C的标准组织)参与进行标准化的语法规范。

● ECMAScript定义了：

▶ 语言语法：语法解析规则、关键字、语句、声明、运算符等。

▶ 类型：布尔型、数字、字符串、对象等。

▶ 原型和继承

▶ 内建对象和函数的 标准库-JSON、Math、数组方法、对象自省方法等。

● ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM (文档对象模型)的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

● ECMAScript标准的历史版本分别是1、2. 3. 5.

● 那么为什么没有第4版?其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除(这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统)。

● ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布-一个相对谦和的ES5版本， 随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为"Harmony"，因此，ES5规范中包含这样两句话。

ECMAScript是一门充满活力的语言,并在不断进化中。

未来版本的规范中将持续进行重要的技术改进。

● 2009年发布的改进版本ES5,引入了0bject.create()、Object.defineProperty()、 getters和setters、严格模式以及JSON对象。

● ECMAScript 6.0 (以下简称ES6)是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

5.2、ECMAScript的快速发展

而后，ECMAScript就进入了 快速发展期。

● 1998年6月， ECMAScript 2.0发布。

● 1999年12月， ECMAScript 3.0发布。这时，ECMAScript规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。

● 2007年10月。 。。。ECMAScript 4.0草案发布。

这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。

▶ 一边是以Adobe、Moilla、Opera和Google为主的ECMAScript 4工作组。

▶ 一边是以Microsoft和Yahoo为主的ECMAScript 3.1工作组。

ECMAScript 4的很多主张比较激进，改动较大。而ECMAScript 3.1则主张小幅更新。最终经过TC39的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本中

● 2009年12月，ECMAScript 5发布。

● 2011年6月， ECMAScript 5.1发布。

● 2015年6月， ECMAScript 6,也就是ECMAScript 2015发布了。并且从ECMAScript 6开始，开始采用年号来做版本。即ECMAScript 2015,就是ECMAScript6。

5.3、ES6的一些新特性

5.3.1、let和const命令及模板字符串及对象初始化简写。

①、let

var：

之前，js定义变量只有一个关键字: var

var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。

Let：

将 i的类型修改为 let

②、const

③、模板字符串

注意，用 ** `` ** tab键上面那个。

④ 对象初始化简写

5.3.2、解构表达式

可以对数组、对象的元素或者属性按顺序、名称的方式进行赋值到对应变量中。

① 数组解构：

②、对象解构

5.3.3、函数优化

①、箭头函数

单参：

多参：

②、对象方法简写

③、结构表达式与对象方法简写

5.3.4、map方法的使用

**map()😗*接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

举例:有一个字符串数组，希望转为int数组。

5.3.5、reduce方法的使用

reduce(function(),初始值(可选) ):接收一个**函数(必须)**和一个初始值(可选)， 该函数接收两个参数:

● 第一个参数是上一次reduce处理的结果

● 第二个参数是数组中要处理的下一个元素

reduce()会从左到右依次把数组中的元素用function()处理，并把处理的结果作为下次function()的第一个参数。 如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

举例:

5.3.6、promise应用示例

● 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

● 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

● Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

● 可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

语法:

​ 这样，在promise中就封装了一段异步执行的结果。

如果想要等待异步执行完成做一些事情，可通过promise的then方法来实现语法：

如果想要处理promise异步执行失败的事件，还可以跟上catch：

示例：

5.3.7、对象扩展

ES6给Object拓展了许多新的方法，如: .

● keys(obj)：获取对象的所有key形成的数组。

● values(obj)：获取对象的所有value形成的数组。

● entries(obj)：获取对象的所有key和value形成的二维数组。格式: [[k1,v1], [k2,v2…]。

● assign(dest, …)：将多个src对象的值拷贝到dest中(浅拷贝)

5.3.8、数组扩展

ES6给数组新增了许多方法：

● find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素。

● findIndex(callback)：与find类似，不过返回的是匹配到的元素的索引。

● includes (element)：判断指定元素是否存在。

六、babel

6.1、export和import

ES6在语言标准的层面上，实现了模块功能。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。遗憾的是export和import命令不能在浏览器直接使用，不过可以通过babeI转换为es5再运行。import导入模块、export导出模块。

6.2、安装babel

babel是JavaScript语法的编译器。

① babeI转换配置项目根目录添加

.babelrc 文件（手动添加即可）

{
  "presets": ["es2015"]
}

② 安装es6转换模块

npm install babel-preset-es2015 --save-dev

③ 全局安装命令行工具

npm install babel-cli -g

④使用

6.3、export和import联合应用

6.3.1、命名导出

此方式每一个需要输出的数据类型都要有一个name， 统一输入一定要带有{}，即便只有一个需要输出的数据类型。

export导出模块: 编写export1.js

结果：

注意：当导出变量出现冲突时，可以对导出变量加别名

6.3.2、默认导出

默认输出不需要name,但是一个js文件中只能有一个export default。

export导出模块:编写export2.js

方式一结果：

方式二结果：