NodeJS&前端工程化

概述

简单的说 Node.js 就是运行在服务端的 JavaScript。

前端工程化是指在前端开发过程中，通过使用一系列的工具、流程和方法来提高开发效率、代码质量和团队协作的过程。它的目标是让前端开发变得更加可控、可维护、可扩展，并且能够更好地适应团队的协作和项目的变化。

参考：

掘金-代码与野兽：前端工资涨不上去？可能是你没掌握构建工具：关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC……的那些事

知乎-全沾GIS攻城狮：什么是webpack？

简书-长城_changcheng：npm常用命令

前端工程化涵盖了许多方面，包括但不限于以下内容：

• 代码规范和风格指南： 制定统一的代码规范和风格指南，以确保团队成员编写的代码风格一致，从而提高代码的可读性和可维护性。

• 版本管理： 使用版本控制系统（如Git）来跟踪和管理代码的变更，方便团队协作，同时也能够轻松地回溯历史版本。

• 构建工具： 使用构建工具（如Webpack、Parcel、Rollup等）来自动化构建过程，包括代码压缩、打包、资源优化等，以减少手动操作，提高开发效率。

• 模块化： 使用模块化的开发方式，将代码拆分为独立的模块，以便于维护、复用和测试。常见的模块化规范包括CommonJS、ES6模块等。

• 自动化测试： 编写单元测试、集成测试和端到端测试，以保证代码的质量和稳定性。自动化测试可以及早发现并修复潜在的问题，减少bug的产生。

• 持续集成和持续交付： 将自动化测试、构建和部署流程集成到开发过程中，实现持续集成（CI）和持续交付（CD），以便快速、频繁地发布新版本。

• 性能优化： 优化前端性能，包括减少页面加载时间、优化资源请求、压缩代码等，以提供更好的用户体验。

• 代码分析和检查： 使用静态代码分析工具和代码检查工具，发现潜在的问题、漏洞和不符合规范的代码，从而提高代码质量。

• 文档和注释： 编写清晰的文档和注释，使其他团队成员能够理解代码的功能和使用方法。

• 依赖管理： 使用包管理工具（如npm、Yarn）来管理项目的依赖，确保依赖库的版本一致性和可控性。

通过采用前端工程化的方法，开发团队可以更加高效地协作，降低维护成本，提高项目的可维护性和稳定性。

构建工具

构建工具一般分为：底层 JS/TS 转译器，上层打包器

• 转译器（Transpiler）： 转译器是一种工具，用于将一种编程语言（通常是较新的、不被浏览器完全支持的语言）转换为另一种编程语言（通常是较旧的、被广泛支持的语言）。在前端开发中，最常见的用途是将新版本的 JavaScript 转译成旧版本的 JavaScript，以确保在不同浏览器中都能够运行。
• 打包器（Bundler）： 打包器是一种工具，用于将前端应用程序中的多个文件和模块组合成一个或多个较大的文件（通常是一个或多个 JavaScript 文件）。这有助于减少网络请求的数量，提高应用程序加载速度，并优化资源的加载顺序。

vite

Vite 是更为现代的开发工具，它结合了转译、打包和开发服务器的功能

webpack

Webpack 是一个功能强大的打包器，它可以将多个模块、文件和资源打包成一个或多个 bundle，还可以处理 CSS、图片等资源，并支持代码分割、热模块替换等功能。

但，配置很多

1. 强大的生态系统： Webpack 是一个功能强大且灵活的构建工具，适用于各种项目。它提供了丰富的插件和加载器，使你能够对各种资源进行处理和优化。
2. 模块打包： Webpack 以模块为基础，可以处理各种类型的资源，包括 JavaScript、CSS、图片等。它将这些资源视为模块，并将它们打包成最终的输出文件。
3. 代码分割和懒加载： Webpack 支持将代码分割成多个块，以便在需要时按需加载。这有助于优化页面加载性能。
4. 丰富的配置： Webpack 的配置非常灵活，但也相对复杂。你可以精确控制资源的处理和输出，以及各种构建优化选项。

babel

Babel是一个用于将最新版本的JavaScript代码转换为向后兼容版本的工具。JavaScript是一门不断发展的编程语言，新的语法和功能经常被引入到语言中。然而，不同的浏览器和JavaScript运行环境可能不支持最新的语法和功能，这就导致了开发者在编写代码时需要考虑兼容性问题。

Babel的作用就是帮助开发者解决这个问题。它可以将使用了最新语法和功能的JavaScript代码转换成在旧版浏览器和环境中也能正常运行。

• Babel提供了一些插件和预设，允许开发者将CommonJS模块转换为ECMAScript模块（ESM），以便在现代的浏览器中运行，或者与使用ESM的工具和库进行兼容。

基础

安装

brew search node		#先搜索，结果会有好多个版本可选（线上）

brew install node		#装官方版本

node -v		#安装完成查看安装的版本

安装完成后自带npm，用来管理下载Node依赖软包。

注意：不要删除~目录下的node_modules文件夹。

exports require

在 Node.js 中，使用 ECMAScript 模块语法的文件( export 和 import 关键字)，不能直接在 Node.js 的命令行模式下执行。当你在 Node.js 命令行模式中运行包含 export 关键字的文件时，会导致 SyntaxError: Unexpected token 'export' 错误。

原因是 Node.js 默认使用的是 CommonJS (服务器)模块系统，而不是 ECMAScript (浏览器)模块系统。在 CommonJS 模块中，没有 export 和 import 关键字，而是使用 module.exports 和 require 来导出和导入模块。

参考：

简书-江疏影子：module.exports与exports的区别

比如我想测试某个函数，在vue-cli-service serve模式下没有启动NodeJS提供的服务器，换而言之没进行Babel转换(CommonJS 转 ECMAScript)。

vue-cli-service serve是Vue.js官方提供的一个命令行工具，用于在开发环境中启动一个本地服务器，以便开发者可以实时预览和调试他们的Vue.js应用程序。这个命令提供了开发服务器、热重载（Hot Reloading）、自动编译等功能，使开发过程更加高效。

示例

被测函数

function genToken(corpId, useCode, timeStr, passwd) {
  const _crjs = require('../../node_modules/crypto-js')
  // const _crjs = require('crypto-js')
  // const myDateSamp = new Date().getTime()
  let md5Pass = _crjs.MD5(passwd);
  let hexMD5 = _crjs.enc.Hex.stringify(md5Pass).toUpperCase()
  let to = _crjs.HmacSHA256(`corpcode=${corpId}&timestamp=${timeStr}&usercode=${useCode}`, hexMD5)
  let token = _crjs.enc.Hex.stringify(to);
  console.log("时间戳：" + timeStr);
  console.log("Token：" + token);
}

module.exports = {
  genToken
};

调用函数

const { genToken } = require('./token.js')

genToken(17002, 'dladmin', new Date().getTime(), 'a')

REPL 交互式解释器

Read Eval Print Loop:交互式解释器

Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，类似 Windows 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应。

菜鸟教程：Node.js REPL(交互式解释器)

npm

国内源

更换源

参考:

阿里云开发者社区-NPM镜像站：原淘宝npm域名即将停止解析，请切换至新域名

阿里云开发者社区-王磊-phper：使用阿里云npm镜像加速

# 查看当前npm源
npm config get registry

# 更换源
npm config set registry https://registry.npmmirror.com   

装cnpm，切换国内源

npm install -g cnpm --registry=https://registry.npm.taobao.org

这一步是保证国内下载依赖不龟速。

配置

npm config  list

列出配置路径，其中常用的有node bin location（Node安装路径）、local prefix、cwd（依赖包路径）。

依赖全局下载路径

npm root -g		#输出全局默认依赖包保存路径 -g 全局
/usr/local/lib/node_modules

/usr/local/lib/node_modules/ ls		#npm是默认自带的，hexo是我的hexo博客
hexo-cli npm

查看安装包

list/ls/la/ll功能会不一样，比如la/ll都是显示包描述信息

# -g 查看全局安装包
npm list/ls/la/ll [-g]

但我Mac的Brew支持装两个node版本：

node@16 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have node@16 first in your PATH, run:
  echo 'export PATH="/usr/local/opt/node@16/bin:$PATH"' >> ~/.zshrc

For compilers to find node@16 you may need to set:
  export LDFLAGS="-L/usr/local/opt/node@16/lib"
  export CPPFLAGS="-I/usr/local/opt/node@16/include"

两个版本分别是：node16、node18，切换按理来说只需配置环境变量。

但其实没必要保持两个版本，直接brew卸载了旧版本，hexo依旧可使用，之前只是担心hexo会出问题。

npm config list      #18的配置信息，当前使用
; "builtin" config from /usr/local/lib/node_modules/npm/npmrc

prefix = "/usr/local" 

; "user" config from /Users/fuding/.npmrc

registry = "http://registry.npm.taobao.org/" 

; node bin location = /usr/local/Cellar/node/18.6.0/bin/node
; node version = v18.6.0
; npm local prefix = /usr/local/lib
; npm version = 8.13.2
; cwd = /usr/local/lib/node_modules
; HOME = /Users/fuding
; Run `npm config ls -l` to show all defaults.

 /usr/local/opt/node@16/bin/ npm config list #16的配置信息，如果要用16版本得切换环境变量
; "builtin" config from /usr/local/lib/node_modules/npm/npmrc

prefix = "/usr/local" 

; "user" config from /Users/fuding/.npmrc

registry = "http://registry.npm.taobao.org/" 

; node bin location = /usr/local/Cellar/node/18.6.0/bin/node
; node version = v18.6.0
; npm local prefix = /usr/local/Cellar/node@16/16.16.0/bin
; npm version = 8.13.2
; cwd = /usr/local/Cellar/node@16/16.16.0/bin
; HOME = /Users/fuding
; Run `npm config ls -l` to show all defaults.

卸载

如果要进行卸载包，在我的Mac机器上先进入全局安装的路径 /usr/local/lib/才能卸载掉，实验直接在～目录下使用npm uninstall @vue/cli@4.5.15只能在～目录下创建node_modules。

卸载掉@vue/cli@4.5.15，全局vue命令不识别，说明vue-cli包含vue。

npx

npx 是 npm 5.2.0 版本引入的一个工具，它的作用是在执行项目依赖包的命令时，会自动在本地 node_modules/.bin 目录中查找可执行命令，如果找到则直接运行，如果没有找到则立即下载安装所需的命令并执行。这使得您可以在不全局安装这些命令的情况下，通过使用 npx，您可以确保在不同项目中使用不同版本的相同命令，而不会发生冲突。