Node.js：前端开发者迈向全栈的实战指南

前言

针对前端开发者，是否存在以下痛点或诉求：

• 希望开发个人项目却缺乏后端支持，仅能依赖Mock数据？
• 前后端协作时感到诸多限制，沟通不畅导致效率低下？
• 不愿仅依赖他人合作，渴望独立实现完整功能？
• 期望提升职业竞争力，拓宽技术视野，成为团队核心成员？
• 偏好独立开发模式，不愿受限于团队分工安排？
• 其他类似情况

若存在上述问题，考虑转型全栈开发是合理选择，而学习Node.js则是通往全栈的必经之路。

一、什么是Node

Node.js是JavaScript的运行环境，使JS能开发后端程序，实现绝大多数后端语言具备的功能。

这意味着掌握JavaScript即可进行全栈开发。

学习Node可平滑过渡至全栈开发。若曾学习Vue、React等前端框架或Webpack，实则已接触Node，因它们均基于Node构建，例如： Vue、React脚手架：Vue-cli，create-react-app，vite等（使用这些框架需安装Node环境）

前端常用的npm是NodeJS包管理及分发工具，相当于Node的开源仓库（全球最大）。 可通过npm指令下载指定项目（如运行npm i axios下载axios）。 亦可开发插件项目并通过npm指令上传至该仓库。

Node.js的由来

Node.js基于V8引擎，V8是Google发布的开源JavaScript引擎，原用于Chrome浏览器JS解释部分。Node之父Ryan Dahl将V8移植至服务器端，用于构建服务端软件。

Node.js于2009年5月发布，历经十余年发展，已成为前端领域的核心支柱。即便不进行服务端开发，它亦渗透于开发全流程，如前述Vue、React、Webpack。

Node.js的特性

• Node.js贯穿客户端（如Vue等框架底层依赖）与服务端（如后端开发）。

• 其语法完全兼容JavaScript及ES6语法。

• Node.js具备卓越的高并发处理能力，可实现高性能服务器。

• 具有开发周期短、成本低、学习门槛低的特点。

单论后端开发，Node.js作为JavaScript运行环境，性能虽不及Java等编译型语言，但其独特特性可弥补甚至超越性能差距。这也是其发展迅速、备受青睐的原因。

至此，应已理解为何称Node为前端至全栈的必经之路。

二、浏览器环境与Node环境对比

参考图示：

绘图质量有限，请谅解（操作系统涵盖网卡/硬盘/本地文件等，通常为Windows、macOS或Linux等）。

从图示看，Node环境似为浏览器环境的一部分，实则不然。浏览器环境中难以触及操作系统层，因存在浏览器安全级别限制（若无此限制，网页可直接操控操作系统，后果不堪设想）。

Node.js作为JavaScript服务端运行环境，可解析JavaScript代码（无浏览器安全限制），并提供诸多系统级API，例如：

• 系统文件读写（fs模块）。
• 系统进程管理（process模块）。
• 网络通信（HTTP/HTTPS协议）。
• 其他功能。

这也意味着在Node.js中无法使用浏览器提供的API，如window对象，亦不能操作DOM元素。

三、搭建Node环境

若曾使用npm或前端框架，想必已搭建好Node环境。此处针对未搭建者再次演示：

访问Node官网：https://nodejs.org/zh-cn。

推荐下载长期维护的稳定版本，下载完成后一路点击Next安装即可。

随后在任意位置终端运行：node -v。

若显示版本号，则代表安装成功。

此处安装版本较旧，版本号偏低，但不影响使用。

四、体验Node模块化开发

在文件夹内随意创建两个js文件，如下所示：

因Node语法即JavaScript语法，故使用Node进行模块化开发仍采用CommonJS或ES Modules方式，此处直接演示，不再赘述。

CommonJS方式

Node默认采用CommonJS方式：

// index.js​​​​​​​
const name = "Ailjx";
// 导出方法一：module.exports直接导出
// 直接对module.exports赋值时，main.js中导入的就是这个赋值
// 多个module.exports赋值时，只生效最后一个，即最后一个会替代前面的
module.exports = name;

在文件夹终端运行node js文件路径命令即可使用Node运行指定js文件，console.log打印结果将在终端显示。

每次修改main.js后需重新运行命令node .\main.js执行main.js文件，此举略显不便。可安装nodemon插件以辅助自动运行：

npm i nodemon -g

随后使用nodemon运行main.js：

nodemon .\main.js

其他导出语法示例：

// index.js​​​​​​​
const name = "Ailjx";

// 导出方法一：module.exports直接导出
// 直接对module.exports赋值时，main.js中导入的就是这个赋值
// 多个module.exports赋值时，只生效最后一个，即最后一个会替代前面的
module.exports = name;

// 导出方法二：module.exports导出对象
// main.js里n接受的是一个对象{ NNNN: 'Ailjx' }
module.exports = {
    NNNN: name, // 顺便起个别名
    // 可以继续导出其它内容
};

// 导出方法三：exports.key值=内容
// main.js里n接受的是一个对象{ Myname: 'Ailjx', Myname2: 'Ailjx' }
// 使用多个 exports.key值=内容 时最终会合并成一个大对象（相同key值的会覆盖），而不是像多个module.exports赋值时，只生效最后一个
// exports.key值与module.exports一起使用时会被module.exports替代
exports.Myname = name;
exports.Myname2 = name;

// 导出方法四：exports.key值=对象
// main.js里n接受的是一个对象：{ Myname: { A: 'Ailjx' } }
exports.Myname = {
    A: name, // 顺便起个别名
    // 导出其它内容
};

ES Modules方式

因Node默认使用CommonJS规范，使用ES Modules时需进行配置。

首先在文件夹下运行npm init生成package.json文件：

运行npm init后会依次提示输入信息，按图示提示填写即可，最终生成的package.json文件如下：

{​​​​​​​
  "name": "node",
  "version": "1.0.0",
  "description": "node学习",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Ailjx",
  "license": "MIT"
}

在package.json中添加一行"type": "module"，即可切换至ES Modules方式，此时不再支持CommonJS方式（二者选一）。

不建议使用ES Modules，因npm仓库中多数包遵循CommonJS规范。若使用ES Modules下载这些包，极易出现不兼容问题。

语法示例：

const name = "Ailjx";

// 接口暴露方法一：export default默认导出
// 一个文件只能有一个export default
// main.js使用：import n from "./index.js";进行导入，n自己随便起名，它的值为Ailjx
// export default name;

// 接口暴露方法二：export导出对象
// main.js使用：import { MyName } from "./index.js";进行导入
export {
    name as MyName, // 顺便使用as改个别名
    // 导出其它成员
};

// export default 可以和 export导出对象 一起使用，一起使用时：
// main.js使用：import n, { MyName } from "./index.js";进行导入，n和MyName的值都为Ailjx

结语

仅学习Node并不能使你真正成为全栈专家。学习Node旨在帮助前端人员快速、平滑地过渡至全栈开发，为后续发展奠定基础。若欲成为真正的全栈专家，仍需学习Java等编译型语言及其他相关技术。

到此关于node.js从前端到全栈的必经之路的文章介绍完毕，更多相关node.js前端到全栈内容请搜索本站历史文章或继续浏览下方相关文章，希望大家以后多多支持本站！