node.js学习笔记

最新推荐文章于 2024-05-16 00:00:10 发布

lazyhhh

最新推荐文章于 2024-05-16 00:00:10 发布

阅读量873

点赞数

分类专栏：笔记文章标签： nodejs

本文链接：https://blog.csdn.net/qq_46539281/article/details/116862409

版权

笔记专栏收录该内容

42 篇文章 3 订阅

订阅专栏

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/ 资料文件夹中已经提供。

官网下载地址：https://nodejs.org/en/download/

2、选安装目录进行安装
推荐下载LTS版本。安装请参考资料\NodeJS安装说明.pdf
在这里插入图片描述

完成以后，在控制台输入：

# 查看node版本信息
node -v

在这里插入图片描述

1.3. 快速入门

1.3.1. 创建测试工程

建一个能写javascript的项目就行

1.3.2. 控制台输出

现在做个最简单的小例子，演示如何在控制台输出，创建文本文件demo1.js,代码内容

demo01.js

var a = 1;
var b = 2;
console.log(a+b);

在命令提示符下输入命令

node demo1.js

在这里插入图片描述

1.3.1 使用函数

创建文本文件demo2.js

var c=add(100,200);
console.log(c);

function add(a,b){
return a+b;
}

命令提示符输入命令

node demo02.js

在这里插入图片描述

1.3.4. 模块化编程

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

创建文本文件demo3_1.js

exports.add=function(a,b){
return a+b;
}

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

创建文本文件demo3_2.js

引入模块demo3_1
var demo= require('./demo3_1');
console.log(demo.add(400,600));

在命令提示符下输入命令

 node demo3_2.js

在这里插入图片描述

1.3.5. 创建web服务器

创建文本文件demo4.js

//http为node内置的web模块
//导入内置模块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/');

在命令提示符下输入命令

node demo04.js

服务启动后，我们打开浏览器，输入网址

http://localhost:8888

在这里插入图片描述

在命令行中按 Ctrl+c 终止运行。
在这里插入图片描述

1.3.6. 理解服务端渲染

创建demo5.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"
    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/');

在这里插入图片描述

右键“查看源代码”发现，并没有我们写的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");

在这里插入图片描述

访问：http://localhost:8888/?id=123&name=itcast
在这里插入图片描述

2. 包资源管理器NPM

2.1 什么是NPM

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

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

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

在这里插入图片描述

2.2. NPM命令

要使用npm 去下载js库或者是模块，需要将工程初始为npm 工程结构

nit命令是工程初始化命令。

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

npm init

在这里插入图片描述

按照提示输入相关信息，如果是用默认值则直接回车即可。

name: 项目名称 ---------- 默认是目录名或工程名

version: 项目版本号

description: 项目描述

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

入口文件：如果是空的项目，他会指定为一个 index.js 的文件。如歌有js文件，会找到第一个js文件

入口js文件：在一般前端工程中，会将其他的js,在这个入口js文件中引入，其他的地方引入这个入口js文件即可。

最后会生成 package.json 文件，这个是包的配置文件，相当于maven的pom.xml

之后也可以根据需要进行修改。

在这里插入图片描述

2.2.2. 本地安装

install命令用于安装某个模块，可以通过require引入到项目中使用。如我们想安装express模块（node的web框
架），输出命令如下：（必须以管理员的身份进行打开）

npm 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：安装最新版本。

2.2.3. 全局安装

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

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

npm root -g

在这里插入图片描述

默认全局目录在
C:\Users\Administrator\AppData\Roaming\npm\node_modules

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

# 安装之后在全局目录下会存在对应的jquery目录，其里面的dist则包含有对应的jquery.js文件 
# -g 就代表全局安装
npm install jquery -g

在这里插入图片描述

2.2.4. 批量下载

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

npm install

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

在这里插入图片描述

2.2.5. 切换NPM镜像

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

1、如果使用切换镜像源的方式，可以使用一个工具： nrm

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

# 管理员身份 打开cmd执行如下命令
npm install nrm -g

在这里插入图片描述

然后通过 nrm ls 命令查看npm的仓库列表,带 * 的就是当前选中的镜像仓库：

在这里插入图片描述
解决问题的博客：
这里

在这里插入图片描述

通过 nrm use taobao 来指定要使用的镜像源：
在这里插入图片描述

2、如果使用cnpm的方式，则先安装cnpm，输入如下命令

# 如果不使用nrm 切换，可以在安装cnpm的时候指定镜像仓库
npm install -g cnpm --registry=https://registry.npm.taobao.org

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

cnpm -v

使用cnpm

cnpm install 需要下载的js库；一般只有在下载模块的时候才使用cnpm，其它情况还是一样使用npm;

2.2.6. 运行工程说明（不是很懂）

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

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

dev是开发阶段测试运行
build是构建编译工程
lint 是运行js代码检测

运行时命令格式：

 npm run dev或者build或者lint

2.2.7. 编译工程说明（不是很懂）

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

npm run build

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

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

这里其实是调用了webpack来实现打包的，关于webpack下面的章节将进行介绍。

3. Webpack入门

3.1. 什么是Webpack

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

在这里插入图片描述

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

3.2. Webpack安装

全局安装

npm install webpack -g
npm install webpack-cli -g

如果安装失败；则将全局目录下的webpack的相关文件夹删除再执行上述命令
在这里插入图片描述

安装后查看版本号

webpack -v

在这里插入图片描述

3.3. 快速入门

3.3.1. JS打包

（1）创建src文件夹，创建bar.js

exports.info=function(str){
	document.write(str);
}

（2）src下创建logic.js

exports.add=function(a,b){
	return a+b;
}

（3）src下创建main.js ( 入口文件)

//引入js文件，并应用
var bar = require('./bar');
var logic = require('./logic');
bar.info("100+200 = "+logic.add(100,200));

（4）创建配置文件webpack.config.js ，该文件与src处于同级目录

ar path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
	//入口文件
	entry: "./src/main.js",
	output:{
		//__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
		path: path.resolve(__dirname, "./dist"),
		filename: "bundle.js"
	}
}

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

（5）执行编译命令 (管理员身份运行)

webpack

在这里插入图片描述

（7）创建index.html ,引用bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nodejs测试</title>

    <!-- 引入打包生成的js文件 -->
    <script src="dist/bundle.js"></script>

</head>
<body>

</body>
</html>

在这里插入图片描述

3.3.2. CSS打包

（1）安装style-loader和 css-loader

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

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

 cnpm install style-loader css-loader --save-dev
 npm 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目录中。

 cnpm install less less-loader --save-dev
 npm install less less-loader --save-dev

在这里插入图片描述

（2）修改webpack.config.js

var path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
	//入口文件
	entry: "./src/main.js",
	output:{
		//__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
		path: path.resolve(__dirname, "./dist"),
		filename: "bundle.js"
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use: ["style-loader", "css-loader"]
			}
		]
	}
}