0. 学习目标
能够按照文档安装Node.js
能够使用npm安装组件
能够使用webpack打包js
能够说出es6中let和const变量的区别
使用解构表达式处理对象属性
能够使用export导出模块文件
能够使用import导入模块文件
1. Node.js
1.1. 什么是Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
1.2. Node.js安装
1、下载对应你系统的Node.js版本
https://nodejs.org/en/download/。
2、选安装目录进行安装
推荐下载LTS版本。安装时默认一直下一步即可
完成以后,在控制台输入:
# 查看node版本信息 node -v
1.3. 快速入门
1.3.1. 创建测试工程
1.3.2. 控制台输出
现在做个最简单的小例子,演示如何在控制台输出,创建文本文件demo1.js,代码内容
var a=1; var b=2; console.log(a+b);
在命令提示符下输入命令
node demo1.js
1.3.3. 使用函数
创建文本文件demo2.js
var c=add(100,200); console.log(c); function add(a,b){ return a+b; }
命令提示符输入命令
node demo2.js
运行后看到输出结果为300
1.3.4. 模块化编程
每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
exports.add=function(a,b){ return a+b; }
每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
//引入模块demo3_1 var demo= require('./demo3_1'); console.log(demo.add(400,600));
在命令提示符下输入命令
node demo3_2.js
结果为1000
1.3.5. 创建web服务器
创建文本文件demo4.js
//http是内置模块 var http = require('http'); http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); // 发送响应数据 "Hello World" response.end('Hello World\n'); }).listen(8888); // 终端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');
http为node内置的web模块
在命令提示符下输入命令
node demo4.js
服务启动后,我们打开浏览器,输入网址
http://localhost:8888/
即可看到网页输出结果Hello World
在命令行中按 Ctrl+c 终止运行。
3.6. 理解服务端渲染
创建demo5.js ,将上边的例子写成循环的形式
var http = require('http'); http.createServer(function (request, response) { //发送 HTTP 头部 //HTTP 状态值: 200 : OK //内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); //发送响应数据 "Hello World" for(var i=0;i<10;i++){ response.write('Hello World\n'); } response.end(''); }).listen(8888); //终端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');
在命令提示符下输入命令启动服务
node demo5.js
浏览器地址栏输入http://127.0.0.1:8888即可看到查询结果。
右键“查看源代码”发现,并没有我们写的for循环语句,而是直接的10条Hello World ,这就说明这个循环是在服务端完成的,而非浏览器(客户端)来完成。这与JSP很是相似。
1.3.7. 接收参数
创建demo6.js
//引入http模块 var http = require("http"); var url = require("url"); //创建服务,监听8888端口 http.createServer(function (request, response) { //发送http头部 //http响应状态200 //http响应内容类型为text/plain response.writeHead(200, {"Content-Type": "text/plain"}); //解析参数 //参数1:请求地址; //参数2:true时query解析参数为一个对象,默认false var params = url.parse(request.url, true).query; //将所有请求参数输出 for (var key in params) { response.write(key + " = " + params[key]); response.write("\n"); } response.end(""); }).listen(8888); console.log("Server running at http://127.0.0.1:8888 ")
命令提示符下输入命令
node demo6.js
2. 包资源管理器NPM
2.1. 什么是NPM
npm全称Node Package Manager,是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven 。
通过npm可以很方便地下载js库,管理前端工程。
现在的node.js已经集成了npm工具,在命令提示符输入npm -v 可查看当前npm版本
2.2. NPM命令
2.2.1. 初始化工程
init命令是工程初始化命令。 建立一个空文件夹或者在上述的示例工程中,在命令提示符进入该文件夹执行命令初始化
npm init
按照提示输入相关信息,如果是用默认值则直接回车即可。
name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array}关键词,便于用户搜索到我们的项目
最后会生成 package.json 文件,这个是包的配置文件,相当于maven的pom.xml 之后也可以根据需要进行修改。
2.2.2. 本地安装
install命令用于安装某个模块,可以通过require引入到项目中使用。如我们想安装express模块(node的web框架),输出命令如下:
npm install express --如果下载慢可以参考本章2.2.5小结,使用cnpm淘宝镜像 --cnpm install express
出现警告信息,可以忽略,请放心,你已经成功执行了该命令。
在该目录下已经出现了一个node_modules文件夹 和package-lock.json
node_modules文件夹用于存放下载的js库(相当于maven的本地仓库)
package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新(可能存在切换了不同的镜像源后,同一个大版本号下可能出现兼容问题,package-lock可以保证即使换了源,下载的文件和原来的可以保持一致)。
我们再打开package.json文件,发现刚才下载的express已经添加到依赖列表中了。
关于版本号定义:
指定版本:比如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:安装最新版本。