node 和 webpack

nodejs

• 概念：基于 Chrome 的 V8 引擎封装，独立执行 JavaScript 代码的环境
• Node.js 与浏览器环境的 JS 最大区别：Node.js 环境中没有 BOM 和 DOM
• Node.js 作用：
  • 编写后端程序：提供数据和网页资源等
  • 前端工程化：集成各种开发中使用的工具和技术
• 在终端执行 node xxx.js 即可脱离浏览器环境执行 js

内置模块

fs 模块

• 模块：类似插件，封装了方法和属性

• fs 模块：封装了与本机文件系统进行交互的方法和属性

示例代码如下：

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

path 模块

• Node.js 代码中，相对路径是根据终端所在路径来查找的，可能无法找到想要的文件，所以在 Node.js 代码中，尽量使用绝对路径
• 通过 Node.js 的内置变量 __dirname 获取当前 js 的绝对路径
• path.join() 用于将多个路径片段连接在一起形成一个标准化的路径，可以在不同的操作系统上生成正确的路径

示例代码如下：

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())
})

http 模块

使用 http 模块创建 Web 服务并响应内容给浏览器，示例代码如下：

// 加载 http 模块，创建 web 服务对象
const http = require('http')
const server = http.createServer()
// 监听 request 请求事件
server.on('request', (request, response) => {
    response.setHeader('Content-type', 'text/plain;charset=utf-8')
    response.end('你好')
})

server.listen(3000, () => {
    console.log('web 服务器已开启')
})

模块化

• 概念：在 Node.js 中，每个 JavaScript 文件被视为一个单独的模块

• 好处：提高代码复用性，按需加载，独立作用域

• 使用：使用 CommonJS 标准语法导出和导入进行使用

  • 导入：require('模块名或路径')
    • 内置模块：直接写模块名（例如：fs，path，http）
    • 自定义模块：写模块文件路径（例如：./utils.js）
  • 导出：module.exports = {}

ES 导入和导出

ECMAScript 标准是 JavaScript 语言的基础，而 CommonJS 规范是在此基础上衍生出来的一种模块化规范

ES 导入导出语法：

• 导出：
  • 默认导出：export default {}
  • 命名导出：export 修饰定义语句
• 导入：
  • 默认导入：import 变量名 from '模块名或路径'
  • 命名导入：import { 同名变量 } from '模块名或路径'

• 按需加载，使用命名导出和导入
• 全部加载，使用默认导出和导入

示例代码如下：

// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}

// 默认导入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result)

// ---------------------------------

// 命名导出
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 命名导入
import {baseURL, getArraySum} from './utils.js'
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result = getArraySum([10, 21, 33])
console.log(result)

注意：Node.js 默认使用 CommonJS 标准语法，如需使用 ECMAScript 标准语法，需在运行模块所在文件夹新建 package.json 文件，并设置 { "type" : "module" }

包

• 包：将代码文件，配置文件及资源文件聚合成一个文件夹
• 分类：
  • 项目包：主要用于编写项目和业务逻辑
  • 软件包：封装工具和方法进行使用
• 要求：根目录中，必须有 package.json 文件（记录包的信息）
• 导入软件包时，引入的默认是 index.js 模块文件，也可以在 package.json 文件中使用 main 属性手动指定模块文件

npm

• 概念：npm 是包管理器，类似于 maven
• 软件包区别：
  • 本地软件包：当前项目内使用，存在于 node_modules
  • 全局软件包：本机所有项目使用，存在于系统设置的位置
• 常用命令如下：
  • npm init -y：初始化一个新的 npm 项目
  • npm i 软件包名称：下载软件包，并记录在 package.json 中
  • npm i：下载 package.json 中记录的所有软件包到当前项目
  • npm i nodemon -g：安装 nodemon 到全局环境中
  • nodemon xx.js：替代 node 命令，检测代码更改，自动重启程序，热更新

• 疑问：为什么 npm 作为一个包管理器，还有那么多乱七八糟的版本呢？
• 解答：不同 npm 版本之间的会存在差异，例如依赖解析算法：

1. 一个项目使用了两个依赖项：package-a 和 package-b，它们分别声明了对同一个第三方包 lodash 的依赖
2. 在旧版本的 npm 中，可能使用的是一种较简单的依赖解析算法，只会根据依赖项声明的版本范围选择最新的满足条件的 lodash 版本
3. 而在更新的 npm 版本中，可能使用的是更复杂的依赖解析算法，会考虑到依赖项之间的冲突，以及其他因素来确定使用哪个版本的 lodash

webpack

• 概念：webpack 用于打包和构建 Web 应用程序。它可以处理多种资源，如 JavaScript、CSS、图像和字体等，并将它们打包成优化的静态资源供浏览器加载。
• 打包：把静态模块内容，压缩，整合，转译等（前端工程化）
  • 把 less / sass 转成 css 代码
  • 把 ES6+ 降级成 ES5
  • 支持多种模块标准语法，如 CommonJS、ES6 模块
• 和 node、npm 的关系：Webpack 在构建过程中依赖于 Node.js 的运行时环境，并使用 npm 来安装和管理其相关依赖项及脚本命令
• 基本使用：
  1. npm install webpack webpack-cli --save-dev ：安装 Webpack 及其命令行接口（CLI）作为开发依赖项，--save-dev 选项会将 Webpack 添加到 package.json 文件的 devDependencies 字段中
  2. 创建 Webpack 配置文件：在项目根目录下创建一个名为 webpack.config.js 的文件，用于配置 Webpack。在配置文件中，指定入口点、出口点、输出目录、插件等
  3. 编写代码：在项目中编写你的源代码，如 JavaScript、CSS、HTML 等文件
  4. 运行 Webpack：在命令行中运行 npx webpack 命令，将会执行 Webpack 的默认配置，并根据配置文件进行打包。打包后的输出文件将位于配置中指定的输出目录