Node.js + webpack

最新推荐文章于 2024-05-02 10:15:38 发布

阿吧阿巴阿巴

最新推荐文章于 2024-05-02 10:15:38 发布

阅读量405

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/z750467878/article/details/132189140

版权

一、Node.js简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
通俗的理解：Node.js 为 JavaScript 代码的正常运行，提供的必要的环境。

浏览器是 JavaScript 的前端运行环境
Node.js 是 JavaScript 的后端运行环境
Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API

Node.js与浏览器的区别：

相同点：Node.js与浏览器都是javascript的运行环境，都能够解析js程序
不同点：Node.js无法使用DOM和BOM的操作，浏览器无法执行Node.js中的文件操作等功能

Node.js可以做什么?

Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和API，然而，基于Node.js 提供的这些基础能，延伸出了很多强大的工具和框架。

基于 Express/Koa/Egg 等框架（http://www.expressjs.com.cn/），可以快速构建Web 应用
基于 Electron框架（https://electronjs.org/），可以构建跨平台的桌面应用
基于 restify 框架（http://restify.com/），可以快速构建API 接口项目
读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…

二、global模块

window 浏览器中的全局对象
global模块，是node的全局模块，在使用时不需要引入，直接使用

// 1.
console.log()

// 2. setTimeout 和setInterval ，延时器和定时器
setTimeout(() => {
  console.log('123')
}, 1000);

// 模块作用域下的属性 
// 3. __dirname  当前文件夹的绝对路径
// 4. __filename 当前文件的完整路径, 包含当前文件
//从当前所在磁盘盘符一直到当前文件夹的路径
 console.log(__dirname)
 console.log(__filename)

三、fs模块

fs模块是nodejs中最常用的一个模块，因此掌握fs模块非常的有必要，fs模块的方法非常多,用到了哪个查哪个即可
文档地址

注意：

除了global模块中的内容可以直接使用，其他模块都是需要加载的。
fs模块不是全局的，不能直接使用。因此需要导入才能使用。

const fs = require("fs");

3.1 读取文件

// 参数1：文件的路径
// 参数2：读取文件的回调函数

// 回调函数参数
// 参数1：error错误对象，如果读取失败，err会包含错误信息，如果读取成功，err是null
// 参数2：读取成功后的数据（是一个Buffer对象）
fs.readFile(path[, options], callback)

方式一：不传编码参数

const fs = require('fs')

fs.readFile('data.txt', function (err, data) 
    console.log(err) 			 // null
    console.log(data) 			 // <Buffer e5 93 88 e5 93 88>
    console.log(data.toString()) // 读取成功的数据
})

方式二：传编码参数

const fs = require('fs')

fs.readFile('data.txt', "utf8", (err, data) => {
    console.log(err)  // null
    console.log(data) // 读取成功的数据
})

Buffer对象

Buffer对象是Nodejs用于处理二进制数据的。
任意的数据在计算机底层都是二进制数据，因为计算机只认识二进制。
所以读取任意的文件，返回的结果都是二进制数据，即Buffer对象。
Buffer对象可以调用toString()方法转换成字符串。

3.2 写文件

// 参数1：写入的文件名(如果文件不存在，会自动创建)
// 参数2：写入的文件内容（注意：写入的内容会覆盖以前的内容）
// 参数3：写文件后的回调函数
fs.writeFile(file, data[, options], callback)

const fs = require('fs')

fs.writeFile('data.txt', '你好啊', (err) => {
    if (err) return console.log('写入文件失败')
    console.log('写入文件成功')
})

3.3 追加文件内容

//参数1：追加的文件名(如果文件不存在，会自动创建)
//参数2：追加的文件内容
//参数3：追加文件后的回调函数
fs.appendFile(path, data[, options], callback)

const fs = require('fs')

fs.appendFile('data.txt', '你好啊', (err) => {
    if (err) return console.log('追加文件失败')
    console.log('追加文件成功')
})

3.4 练习

把成绩.txt中的数据整理成右边这种格式，并且保存在成绩-ok.txt中

在这里插入图片描述

const fs = require('fs')

// 1.读取 成绩.txt 中的数据
fs.readFile('成绩.txt', 'utf-8', (err, data) => {
    if (err) return ('文件读取失败', err)

    // 2.转化读取的内容
    let newData = data.split(' ').map((item) => {
        return item.replace('=', ':')
    }).join('\n')

    // 3.把新内容写入 成绩-ok 文件
    fs.writeFile('成绩-ok.txt', newData, (err) => {
        if (err) return '成绩写入失败'
        console.log('成绩写入成功');
    })
})

3.5 路径动态拼接的问题

在使用 fs 模块操作文件时，如果提供的操作路径是以./ 或 ../ 开头的相对路径时，很容易出现路径动态拼接错误的问题。
原因：代码在运行的时候，会以执行node 命令时所处的目录，动态拼接出被操作文件的完整路径。
解决方案：在使用fs 模块操作文件时，直接提供绝对路径，不要提供./ 或 …/ 开头的相对路径，从而防止路径动态拼接的问题。
注意：使用__dirname 获取当前文件所在的绝对路径

const fs = require('fs')

// 获取文件的绝对路径
let filepath = __dirname+'/成绩.txt'

fs.readFile(filepath, 'utf-8', (err, data) => {
    if (err) return ('文件读取失败', err)
    console.log(data)
})

四、path路径模块

path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求。例如：

path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串
path.basename() 方法，用来从路径字符串中，将文件名解析出来

如果要在 JavaScript 代码中，使用 path 模块来处理路径，则需要使用如下的方式先导入它：

const path = require('path')

4.1 路径拼接

使用 path.join() 方法，可以把多个路径片段拼接为完整的路径字符串，语法格式如下：

path.join([...paths])

const path = require('path');

console.log( path.join('a', 'b', 'c') ); //      a/b/c
console.log( path.join('a', '/b/', 'c') ); //    a/b/c
console.log( path.join('a', '/b/', 'c', 'index.html') ); //       a/b/c/index.html
console.log( path.join('a', 'b', '../c', 'index.html') ); //      a/c/index.html
console.log(__dirname); // node自带的全局变量，表示当前js文件所在的绝对路径
// 拼接成绩.txt的绝对路径
console.log( path.join(__dirname, '成绩.txt') ); // ------ 最常用的

4.2 获取路径中的文件名

使用 path.basename() 方法，可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名，语法格式如下:

// path <string> 必选参数，表示一个路径的字符串
// ext <string> 可选参数，表示可选的文件扩展名
path.basename(path[,ext])

// 找文件名
console.log( path.basename('index.html') ); //         index.html
console.log( path.basename('a/b/c/index.html') ); //   index.html
console.log(path.basename('/a.jpg')) //                a.jpg

4.3 获取路径中的拓展名

使用 path.extname() 方法，可以获取路径中的扩展名部分，语法格式如下：

// path <string>必选参数，表示一个路径的字符串
path.extname(path)

// 找字符串中，最后一个点及之后的字符
console.log( path.extname('index.html') ); // .html
console.log( path.extname('a.b.c.d.html') ); // .html
console.log( path.extname('asdfas/asdfa/a.b.c.d.html') ); // .html
console.log( path.extname('adf.adsf') ); // .adsf

五、http模块

http 模块是 Node.js 官方提供的、用来创建web 服务器的模块。它提供了一系列的方法和属性，例如：

http.createServer() 方法，用来创建一个web 服务器，从而对外提供web 资源
http.request() 方法，用来发起 http 网络请求，请求其它web 服务器上的资源

如果要在 JavaScript 代码中使用 http 模块，则需要先导入它：

const http = require('http')

5.1 前置知识

ip地址、域名、端口三者之间的关系?

ip地址:
- 任何一台设备(计算机, 手机, …)想要接入到网络中(互联网,局域网)，就会被分配一个唯一的ip地址
- 通过这个ip地址就能找到这台设备
域名:
- 比如 www.jd.com 就是域名，方便记忆
- 我们购买了云服务器之后, 服务器会有一个IP地址, 我们可以通过域名解析让域名指向当前IP
- 域名和ip地址绑定后，通过域名就可以找到对应的ip地址, 从而访问到该服务器
端口:
- 一台计算机能运行很多程序, 一般一个程序会占用一个或者多个端口
- http协议的默认端口是80
- https协议的默认端口是443
- 数据库的默认端口3306

浏览器与服务器的交互过程

根据相关域名, 去查询dns服务器,得到对应的ip地址
根据IP地址, 找到对应的计算机
根据端口找到对应的服务器程序
根据url请求具体的信息
服务器根据请求进行处理
浏览器接收到了服务器的响应, 把结果响应出来

在这里插入图片描述

5.2 创建最基本的web服务器

步骤：

导入 http 模块
创建 web 服务器实例
启动服务器
为服务器实例绑定request 事件，监听客户端的请求

// 1.导入http模块
const http = require('http')

// 2.创建web服务器实例
const server = http.createServer()

// 3.启动服务器
server.listen(3000,()=>{
    console.log('服务器启动成功');
})

// 4) 为服务器实例绑定request 事件，监听客户端的请求
// 参数1: req 接收的是一个request对象, 包含了所有请求相关的信息
// 参数2: res 接收的是一个response对象, 包含了所有响应相关的信息
// 可以通过该对象给客户端返回响应
server.on('request', (req, res)=>{
   console.log('请求进来了~')
   console.log(req)
   // 返回一个响应
   // res.end()方法 结束并返回响应结果
   res.end('this is very ok!')
})

5.3 request对象详解

文档地址

常见属性：

headers: 所有的请求头信息
method: 请求的方式
url: 请求的地址

注意：在发送请求的时候，可能会出现两次请求的情况，这是因为谷歌浏览器会自动增加一个favicon.ico的请求。

// 1.导入http模块
const http = require('http')

// 2.创建web服务器实例
const server = http.createServer((req, res)=>{
    console.log('请求进来了~')
    // 请求常用的属性
    console.log(req.headers) // 获取请求头信息
    console.log(req.method) // 获取请求的方法 比如: get/post/put
    console.log(req.url) // 获取请求的url地址
    
    res.end('please speak english!')
})

// 3.启动服务器
server.listen(3000, ()=>{
    console.log('3000端口的web服务器已经启动')
})

根据不同请求，响应不同内容

const http = require('http')

http.createServer((req, res)=>{
   // 根据不同请求, 响应不同内容
   if (req.url === '/index.html') {
      res.end('this is index.html')
   } else if (req.url === '/login.html') {
      res.end('this is login.html')
   }else if (req.url === '/register.html') {
     res.end('this is register.html')
   } else {
     res.end('this is 404')
   }
}).listen(3000, ()=>{
    console.log('3000端口的web服务器已经启动')
})

5.4 response对象详解

文档地址

注意：必须先设置响应头，才能设置响应

常见的属性和方法：
res.write(data)：给浏览器发送响应体，可以调用多次，从而提供连续的请求体
res.end()：通知浏览器，所有响应头和响应主体都已被发送，即服务器将其视为已完成。
res.end(data)：结束请求，并且响应一段内容，相当于res.write(data) + res.end()
res.statusCode：响应的的状态码 200 404 500
res.statusMessage：响应的状态信息， OK Not Found ,会根据statusCode自动设置。
res.setHeader(name, value)：设置响应头信息，比如content-type
res.writeHead(statusCode, statusMessage, options)：设置响应头，同时可以设置状态码和状态信息。

// 1. 引入http模块
const http = require('http')


// 2. 创建web服务器, 并运行在3000端口上
http.createServer((req, res) => {
    // 1. res.write(data): 给浏览器发送响应体，可以调用多次，从而提供连续的请求体
    res.write('hello')
    res.write('99')
    res.write('class')
    res.end()

    // 2. res.end(data); 结束请求，并且响应一段内容，相当于res.write(data) + res.end()
    res.end('hhhhh jjjj hhh')

    // 3. res.statusCode: 响应的的状态码 200 404 500
    // 正常情况 默认200
    res.statusCode = 200
    res.end('sucess is ok')

    // 资源找不到(路径错误..) 404
    res.statusCode = 404
    res.end('this is 404')

    // 服务器内部错误
    res.statusCode = 500
    res.end('server is error')

    // 4. res.setHeader(name, value); 设置响应头信息， 比如content-type
    // 当调用 res.end()方法，向客户端发送中文内容的时候，会出现乱码问题，此时，需要手动设置内容的编码格式：
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    res.end('大家好')

    // 5. res.writeHead(statusCode, statusMessage, options); 设置响应头，同时可以设置状态码和状态信息。
    res.writeHead(404, 'Not Found', {
        'Content-Type': 'text/html; charset=utf-8'
    })
    res.end('页面404错误')
}).listen(3000, () => {
    console.log('3000端口的web服务器已经启动')
})

根据不同url响应不同的html内容

const http = require('http');

const server = http.createServer();

server.listen(3000, () => console.log('my server running'));

server.on('request', (req, res) => {
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    const url = req.url // 获取请求的url地址
    if (url === '/' || url === 'index.html') {
        res.end('<h1>首页</h1>');
    } else if (url === '/about.html') {
        res.end('<h1>关于我们</h1>');
    } else {
        res.end('<h1>404</h1>');
    }
    
});

六、实现静态WEB服务器

6.1 服务器响应首页

注意：浏览器中输入的URL地址，仅仅是一个标识，不与服务器中的目录一致。也就是说：返回什么内容是由服务端的逻辑决定

server.on('request', function(req, res) {
  var url = req.url
  if(url === '/') {
    fs.readFile('./index.html', function(err, data) {
      if(err) {
        return res.end('您访问的资源不存在~')
      }
      res.end(data)
    })
  }
})

七、模块化

在这里插入图片描述

CommonJS标准，是Node.js的默认标准

在这里插入图片描述

默认导出和导入

在这里插入图片描述

命名导出和导入

总结

八、包

在这里插入图片描述

九、Webpack

在这里插入图片描述

阿吧阿巴阿巴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Node.js + webpack

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。通俗的理解：Node.js 为 JavaScript 代码的正常运行，提供的必要的环境。浏览器是 JavaScript 的前端运行环境Node.js 是 JavaScript 的后端运行环境Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API相同点：Node.js与浏览器都是javascript的运行环境，都能够解析js程序不同点：Node.js无法使用DOM和BOM。
复制链接

扫一扫