Node.js 与前端开发实战 | 青训营笔记

212 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

应用场景

前端工程化

  • Bundle: webpack, vite, esbuild, parcel

对于打包工具,我个人偏向于vite,快速,且截至本文发布时已经比较成熟。

  • Uglify: uglifyjs
  • Transpile: bablejs, typescript
  • 其它:esbuild, parcel, prisma
  • 现状:难以替代

Web服务端应用

eg: NodeJs, Vercel

  • 学习曲线平缓,开发效率较高
  • 运行效率接近常见的编程语言
  • 社区生态丰富及工具链成熟(npm, V8 inspector)
  • 与前端结合的场景会有优势(SSR)
  • 现状:竞争激烈,Node.js有自己独特的优势

Electron跨端桌面应用

  • 商业应用:vscode(但微软使用了大量黑科技来优化), slack, discord, zoom
  • 大型公司内的效率工具
  • 现状:大部分场景在选型时,都值得考虑

相比传统C/C++开发,Electron开发效率很高,简单易学习,但是如果不进行特别的优化,性能较差,打包体积也不是很友好。评价是适合快速开发成型

Node.js运行时结构

image.png

  • V8: JavaScript Runtime, 诊断调试工具(inspector)
  • libuv: eventloop, syscall
  • eg: node-fetch

特点

异步I/O

Node.js执行I/O操作时,会在响应返回后恢复操作,而不是阻塞线程并占用额外内存等待

单线程

JS线程+uv线程池+V8任务线程池+V8 inspector线程,优点是不用考虑多线程状态同步问题,能高效利用系统资源,但是阻塞会产生更多负面影响

跨平台

  • 跨平台(大部分功能和api)
  • Node.js跨平台+JS无需编译环境=开发成本低

编写HTTP Server

安装

Nodejs安装网上教程很多,官网直接下载对应操作系统的安装包或二进制文件即可。截至目前,最新的LTS版本号为18.13.0,建议安装这个版本。

Hello World

简单的Hello World脚本

// http_server.js

const http = require('http')
const port = 3000
const server = http.createServer((req, res) => {
  res.end('hello')
})

server.listen(port, () => {
  console.log('server listens on: ${port}')
})

控制台内运行node http_server.js,然后访问http://localhost:3000即可看到hello。json同理,修改少量内容即可。

Promisify

技巧:将callback转换成promise

静态文件

使用Node自带的文件api即可

...
const fs = require('fs')
const filestream = fs.createReadStream(filepath)
res.pipe(filestream)
...

除此之外,对于更大规模的项目,更好的解决方案是CDN,比较成熟的服务商有阿里腾讯,国外的cf

React SSR

  • 避免重复代码
  • 首屏渲染更快,SEO友好
  • qps较低,需要考虑服务端渲染情况

Debug

几乎所有的现代浏览器都有调试功能,node应用可以很方便地通过该功能查看运行速度,报错信息等

部署

问题

  • 进程守护:当进程退出时,重新唤醒
  • 多进程:cluster便捷地利用多进程
  • 记录进程状态,用于诊断

容器环境

通常有健康检查的手段,只需考虑多核CPU利用率

Node.js贡献代码

深入挖掘node源码,可以理解它的开发思路,以便解决更复杂的问题。在这个过程中,还能提高自我水平,利于职业发展。