【前端工程化-Node.js】Node.js介绍、模块化、模块导入导出语法、npm包管理、同源和跨域

站长

2023年09月28日 21:49 · 阅读数 9

Node.js入门

Node.js是什么

Node.js 是一个跨平台的 JavaScript 运行环境，主要使用场景有：

编写后端程序：充当服务器，对外提供Web服务（接口、数据、网页资源等）
前端工程化：对代码进行压缩，转译和整合

浏览器和Node环境的对比

Node.js 内部封装了 Chrome V8 引擎，因此可以像浏览器一样运行 JS 代码：

node xxx.js

【前端工程化-Node.js】Node.js介绍、模块化、模块导入导出语法、npm包管理、同源和跨域

浏览器和 Node.js 都支持 ECMAScript 标准语法，Node 中没有 DOM 对象和 BOM 对象，但自身又封装了一些特殊的 API

Node常见内置模块

fs 模块：用来读写文件
path 模块：用来处理文件路径
http 模块：对外提供Web服务

Node中相对路径的问题

在 Node 中运行 JavaScript 代码时，代码中的相对路径总是根据 运行命令的终端 所在路径来查找的，在不同的终端下可能会无法找到目标文件

Node 推荐使用绝对路径，在 JS 代码中，先使用 __dirname__ 获取当前文件所在绝对路径，然后调用 path.join(__dirname__,相对路径) 方法拼接成目标文件的真实绝对路径

eg.使用Node对外提供web服务

// 1.引入相关内置模块
const http = require("http");
const fs = require("fs");
const path = require("path");
// 2.创建server对象，用来对外提供web服务
const server = http.createServer();
// 3.监听请求并处理
server.on("request", (req, res) => {
  if (req.url === "/api/province") {
    fs.readFile(path.join(__dirname, "./data/province.json"), (err, data) => {
      // 解决中文乱码
      res.setHeader("Content-Type", "application/json;charset=utf-8");
      // 返回响应数据
      res.end(data.toString());
    });
  } else {
    res.end("<h1>404</h1>");
  }
});
// 4.启动web服务
server.listen(3000, () => {
  console.log("web服务已启动...");
});

eg.模拟前端工程化

// 模拟前端工程化中的代码压缩
// 把 public/index.html 里的回车/换行符去掉，写入到 dist/index.html 中
const fs = require("fs");
const path = require("path");
// 1.读取原文件，利用replace方法替换代码中的回车和换行
fs.readFile(path.join(__dirname, "./public/index.html"), (err, data) => {
  if (err) return console.error(err);
  // 读取的文件内容
  const htmlStr = data.toString();
  // 压缩后的字符串
  const str = htmlStr.replace(/[\r\n]/g, "");
  // 2.将压缩后的代码写入一个新文件中
  fs.writeFile(path.join(__dirname, "./dist/index.html"), str, (err) => {
    if (err) return console.error(err);
    console.log("压缩成功");
  });
});

模块化

什么是模块化

模块化：可以把项目中的每个文件都看做是一个模块。模块之间彼此独立，使用特定语法进行导入导出

模块化的好处：

提高代码复用性
实现按需加载
作用域独立

CommonJS标准 和 ECMAScript标准 是两种常见的模块导入导出的语法标准

CommonJS标准

CommonJS标准 是 Node 默认的导入导出语法规范

const checkUsername = (uname) => uname.length >= 8;
const checkPwd = (pwd) => pwd.length >= 6;
// 导出一个对象
module.exports = {
  checkUsername,
  checkPwd,
};

// 对于导入的对象，可以直接解构赋值
const { checkUsername, checkPwd } = require("./utils/check.js");
console.log(checkUsername("pc666888"));
console.log(checkPwd("123456"));

对于内置模块，导入时只写模块名就行；对于自定义模块，导入时需要写文件完整路径（包括后缀）

ECMAScript 标准

ECMAScript标准 是 ES6 新增的导入导出语法，在现代前端工程化中最为常用

ES6模块的设计思想是尽量的静态化，使得 编译时 就能确定模块的依赖关系，以及输入和输出的变量。CommonJS模块和 AMD模块，都只能在 运行时 确定这些东西

【前端工程化-Node.js】Node.js介绍、模块化、模块导入导出语法、npm包管理、同源和跨域

要在 Node.js 中使用 ECMAScript 标准语法，需要在项目根目录中新建 package.json 文件，并设置 {"type":"module"} 属性

默认导入导出

const checkUsername = (uname) => uname.length >= 8;
const checkPwd = (pwd) => pwd.length >= 6;
// 导出一个对象
export default { checkUsername, checkPwd };

// 对于导入的对象，必须先用一个变量接收
import check from "./utils/check.js";
const { checkUsername, checkPwd } = check;
console.log(checkUsername("pc666888"));
console.log(checkPwd("123456"));

一个模块只能有一个默认导出语句

默认导出不能直接解构赋值，必须用一个变量接收，变量名是可以自定义的

命名导入与导出

使用 命名导入/导出 可以实现模块的按需加载：

// 写法一：单独导出
// export后的修饰定义语句可以是：函数、类或普通变量
export const checkUsername = (uname) => uname.length >= 8;
export const checkPwd = (pwd) => pwd.length >= 6;
// 写法二：统一导出为对象
const checkUsername = (uname) => uname.length >= 8;
const checkPwd = (pwd) => pwd.length >= 6;
export { checkUsername, checkPwd };

// 对于导入的对象，可以直接解构赋值
import { checkUsername, checkPwd } from "./utils/check.js";
console.log(checkUsername("pc666888"));
console.log(checkPwd("123456"));

在html引入js模块

<!-- defer （默认）异步模块加载模式，等待html全部渲染完再执行 -->
<script type="module" src="./foo.js" defer></script>
<!-- async 异步模块加载模式，加载完就执行 -->
<script type="module" src="./foo.js" async></script>

【前端工程化-Node.js】Node.js介绍、模块化、模块导入导出语法、npm包管理、同源和跨域

包管理

什么是软件包

软件包：本质就是一个文件夹，内部封装了工具和方法供开发者使用。根目录中必须要有 package.json 文件（记录软件包的名字，作者，入口文件，依赖包等信息）

软件包的分类：

本地软件包：仅在当前项目内使用，封装属性和方法，存在于项目根目录下的 node_modules 中
全局软件包：本机所有项目都可能会使用，封装命令和工具，存在于系统全局位置（如hexo命令）

在导入三方软件包时，默认入口文件是 index.js，我们也可以在 package.json 中使用 main 属性自定义入口文件的位置

使用npm管理软件包

命令	功能	备注
`npm init -y`	初始化一个 `package.json` 文件	`-y` 跳过填写信息
`npm install <module>`	安装指定依赖包	`-g` 全局安装 \| `--save-dev` 安装开发时的依赖
`npm install`	安装所有依赖包	通常用来生成 `node_modules`