1. Nodejs概述
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/。
在安装过程中出现2503及之后出现的内部错误2502时,可以参考:解决方案
安装成功后可以使用: node -v查看版本信息。
2. Nodejs模块化编程
每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可
见。
每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外
的接口。加载某个模块,其实是加载该模块的module.exports属性。
目标:编写模块文件使用require引入模块后使用node.js执行
小结:可以使用exports将js方法导出,并使用require引入对应的js模块,然后再引入之后可以使用对应的方法。
3. 创建Nodejs Web服务器
目标:引入http模块监听8888端口实现输出字符
小结:
可以利用node.js创建web服务器:
//引入node.js内置http模块
var http = require("http");
//创建并监听web服务器
http.createServer(function (request, response) {
//发送http头部
//参数1:响应状态码,200表示成功
//参数2:响应头部信息,Content-Type内容类型:纯文本
response.writeHead(200, {"Content-Type": "text/plain"});
//发送响应数据
response.end("Hello World \n");
}).listen(8888);
console.log("服务器运行在 http://127.0.0.1:8888 ");
4. 处理Nodejs Web请求参数
目标:引入http和url模块创建web容器并使用url解析请求路径中参数且输出
分析:
需求:http://127.0.0.1:8888?id=123&name=heima 获取到请求路径中参数及值并输出
实现步骤:
- 创建web服务器;
- 引入url模块;
- 利用url解析请求地址中的参数和值并输出
- 启动测试;
小结:
在node.js中可以引入url内置模块对请求地址进行处理:
//引入node.js内置http模块
var http = require("http");
//可以解析请求的路径
var url = require("url");
//创建并监听web服务器
http.createServer(function (request, response) {
//发送http头部
//参数1:响应状态码,200表示成功
//参数2:响应头部信息,Content-Type内容类型:纯文本
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("服务器运行在 http://127.0.0.1:8888 ");
5. 包资源管理器NPM
npm全称Node Package ManagFr,是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven 。
通过npm可以很方便地下载js库,管理前端工程。
现在的node.js已经集成了npm工具,在命令提示符输入npm -v可查看当前npm版本
目标:说出npm的作用;区别本地安装和全局安装
小结:
npm是一个node.js的管理和分发工具,可以根据配置package.json下载js库。
- 本地安装:将下载的模块安装到当前目录(项目);
- 全局安装:将下载的模块安装到全局的目录(
npm root -g
)
NPM命令
初始化工程
init命令是工程初始化命令。
建立一个空文件夹或者在上述的示例工程中,在命令提示符进入该文件夹 执行命令初始化
按照提示输入相关信息,如果是用默认值则直接回车即可。
name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array}关键词,便于用户搜索到我们的项目
最后会生成 package.json 文件,这个是包的配置文件,相当于maven的pom.xml之后也可以根据需要进行修改。
本地安装
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已经添加到依赖列表中了。
关于版本号定义:
全局安装
刚才我们使用的是本地安装,会将js库安装在当前目录,而使用全局安装会将库安装到你的全局目录下。全局安装之
后可以在 命令行 使用该安装的模块对应的内容或命令。
如果你不知道你的全局目录在哪里,执行命令查看全局目录路径
默认全局目录在
C:\Users\Administrator\AppData\Roaming\npm\node_modules
比如全局安装jquery, 输入以下命令
批量下载
从网上下载某些代码,发现只有package.json,没有node_modules文件夹,这时需要通过命令重新下载这些js库.
进入目录(package.json所在的目录)输入命令
此时,npm会自动下载package.json中依赖的js库。
6. 切换NPM镜像
目标:安装nrm组件将npm的镜像切换为淘宝镜像
小结:
- 使用nrm 切换镜像源
npm install nrm -g
nrm use taobao
- 使用cnpm下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install **
有时我们使用npm下载资源会很慢,所以可以切换下载的镜像源(如:淘宝镜像);或者安装一个cnmp(指定淘宝镜
像)来加快下载速度。
1、如果使用切换镜像源的方式,可以使用一个工具:nrm
首先安装nrm,这里 -g 代表全局安装
然后通过 nrm ls 命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
通过 nrm use taobao 来指定要使用的镜像源:
2、如果使用cnpm的方式,则先安装cnpm,输入如下命令
安装后,我们可以使用以下命令来查看cnpm的版本
使用cnpm
运行工程说明
如果我们想运行某个工程,则使用run命令
如果package.json中定义的脚本中有:
dev是开发阶段测试运行
build是构建编译工程
lint 是运行js代码检测
运行时命令格式:
编译工程说明
编译后的代码会放在dist文件夹中,进入命令提示符输入命令
生成后会发现只有个静态页面,和一个static文件夹
这种工程我们称之为单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载
单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
7. webpack概述
目标:webpack的作用是什么并安装webpack
小结:
webpack作用:可以将多个静态资源js、css等打包成一个js文件。
安装命令如下:
npm install webpack -g
npm install webpack-cli -g
什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。webpackjs
从图中我们可以看出,Webpack 可以将多种静态资源 js、css等转换成一个静态文件,减少了页面的请求。 接下来简单为大家介绍 Webpack 的安装与使用。
Webpack安装
全局安装
8. webpack打包js
目标:创建2个js文件,使用webpack命令打包js文件到 dist/bundle.js
文件中并测试。
分析:
实现步骤:
- 创建2个js文件;
- 创建入口文件main.js;
- 创建webpack的配置文件;
- 运行webpack命令;
- 创建index.html页面进行测试
9. webpack打包css
目标:安装style-loader css-loader组件,创建并使用css文件,使用webpack命令打包js文件到 dist/bundle.js
文件中并测试。
分析:
实现步骤:
- 安装转换css的组件;
- 修改配置文件;
- 创建css文件;
- 修改入口文件,加载css文件;
- 打包并测试