nodejs基础笔记

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 获取到请求路径中参数及值并输出

实现步骤：

1. 创建web服务器；
2. 引入url模块；
3. 利用url解析请求地址中的参数和值并输出
4. 启动测试；

小结：

在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 文件中并测试。

分析：

实现步骤：

1. 创建2个js文件；
2. 创建入口文件main.js；
3. 创建webpack的配置文件；
4. 运行webpack命令；
5. 创建index.html页面进行测试

9. webpack打包css

目标：安装style-loader css-loader组件，创建并使用css文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。

分析：

实现步骤：

1. 安装转换css的组件；
2. 修改配置文件；
3. 创建css文件；
4. 修改入口文件，加载css文件；
5. 打包并测试