Node.js与Webpack

1、fs模块 ：文件读写

// 1. 加载 fs 模块对象
const fs = require('fs')
// 2. 写入文件内容
fs.writeFile('./test.txt', 'hello, Node.js11', (err) => {
  if (err) console.log(err)
  else console.log('写入成功')
})
// 3. 读取文件内容
fs.readFile('./test.txt', (err, data) => {
  if (err) console.log(err)
  // data 是 buffer 16 进制数据流对象
  // .toString() 转换成字符串
  else console.log(data.toString())
})

2、path模块

/**
 * 目标：在 Node.js 环境的代码中，应使用绝对路径
 * 原因：代码的相对路径是以终端所在文件夹为起点，而不是 Vscode 资源管理器
 *  容易造成目标文件找不到的错误
 */
const fs = require('fs')
// 1. 引入 path 模块对象
const path = require('path')
// 2. 调用 path.join() 配合 __dirname 组成目标文件的绝对路径
console.log(__dirname)
fs.readFile(path.join(__dirname, '../test.txt'), (err, data) => {
  if (err) console.log(err)
  else console.log(data.toString())
})

3、http模块

// 1 加载 http 模块，创建 Web 服务对象
const http = require('http')
const server = http.createServer()
// 2 监听 request 请求事件，设置响应头和响应体
server.on('request', (req, res) => {
  // 设置响应头-内容类型-普通文本以及中文编码格式
  res.setHeader('Content-Type', 'text/plain;charset=utf-8')
  // 设置响应体内容，结束本次请求与响应
  res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
})
// 3 配置端口号并启动 Web 服务
server.listen(3000, () => {
  console.log('Web 服务启动成功了')
})

4、模块化-基于 CommonJS 标准语法

/**
 * 基于 CommonJS 标准语法，封装属性和方法并导
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 导出
module.exports = {
  url: baseURL,
  arraySum: getArraySum
}
// 导入
const obj = require('./utils.js')

5、模块化-基于 ECMAScript 默认语法

先在目录下新建一个package.json中，设置"type": "module"

/**
 * 基于 ECMAScript 标准语法，封装属性和方法并"默认"导
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}
// 默认导入
import obj from './utils.js'

/**
 * 基于 ECMAScript 标准语法，封装属性和方法并"命名"导
 */

// 命名导出
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
// 命名导入
import {baseURL, getArraySum} from './utils.js'

6、包：将模块，代码，其他资料聚合成一个文件夹；有项目包、软件包分类。

7、webpack：静态模块打包工具，前端工程化

 

 

 

 

二、综合案例

1、访问index.html

const fs = require('fs')
const path = require('path')
// 1. 基于 http 模块，创建 Web 服务
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
  // 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方
  if (req.url === '/index.html') {
    fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {
      res.setHeader('Content-Type', 'text/html;charset=utf-8')
      res.end(data.toString())
    })
  } else {
    // 3. 其他路径，暂时返回不存在提示
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end('你要访问的资源路径不存在')
  }
})
server.listen(8080, () => {
  console.log('Web 服务启动成功了')
})