import{_ as s,o as n,c as a,a as l}from"./app.94d5b31a.js";const A=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[{"level":2,"title":"Node.js","slug":"node-js","link":"#node-js","children":[{"level":3,"title":"什么是Node.js","slug":"什么是node-js","link":"#什么是node-js","children":[]},{"level":3,"title":"Node.js的应用场景","slug":"node-js的应用场景","link":"#node-js的应用场景","children":[]},{"level":3,"title":"Node.js的参数传递","slug":"node-js的参数传递","link":"#node-js的参数传递","children":[]},{"level":3,"title":"Node中的全局对象","slug":"node中的全局对象","link":"#node中的全局对象","children":[]}]},{"level":2,"title":"模块化开发","slug":"模块化开发","link":"#模块化开发","children":[{"level":3,"title":"模块化的初衷","slug":"模块化的初衷","link":"#模块化的初衷","children":[]},{"level":3,"title":"CommonJS","slug":"commonjs","link":"#commonjs","children":[]}]}],"relativePath":"note/Front-end Engineering.md","lastUpdated":1676027424000}'),e={name:"note/Front-end Engineering.md"},o=l(`

前端工程化

Node.js

什么是Node.js

Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境

可以简单总结出Node.js和浏览器的区别

![The Node.js System](Front-end Engineering.assets/The Node.js System.jpeg)

Node.js的应用场景

Node.js的参数传递

process.argv

process.argv返回一个数组

js
// sum.js
const x = process.argv[2]
const y = process.argv[3]
console.log(x + y)
sh
# 通过命令行运行node执行脚本 并传入参数
node sum.js 5 10 # 15

console

REPL

在浏览器的控制台选项卡中，我们可以通过输入JS代码与之交互，在Node.js中同样提供了类似的功能

Node中的全局对象

在浏览器中，我们可以在JS代码中访问全局对象window，代表当前标签窗口

在Node.js中的全局对象名为global，在控制台输出global对象：

sh
> global
<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  performance: Performance {
    nodeTiming: PerformanceNodeTiming {
      name: 'node',
      entryType: 'node',
      startTime: 0,
      duration: 2245.9675999991596,
      nodeStart: 1.7120999991893768,
      v8Start: 7.749699998646975,
      bootstrapComplete: 56.47019999846816,
      environment: 28.44789999909699,
      loopStart: 97.62589999847114,
      loopExit: -1,
      idleTime: 2070.0206
    },
    timeOrigin: 1675854922619.539
  },
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  }
}

常见的全局对象

特殊的全局对象

__dirname __filename exports module require()

global对象

global是一个全局对象

这无异于增加了开发者的心智负担，所以在最新的ECMA标准中出现了globalThis，指向全局对象

两个全局对象的区别：在浏览器中通过var定义的变量会被放到window对象上，而Node.js不会

模块化开发

模块化的初衷

js
// moduleA.js
const moduleA = (function(){
  const name = "Ziu"
  const age = 18
  const run = () => {
    console.log(name + age + 'is running.')
  }
  return {
    name,
    age,
    run
  }
})()

// moduleB.js
console.log(moduleA.name) // 在其他模块中调用

CommonJS

CommonJS是一种规范，当初命名为ServerJS，旨在浏览器以外的地方使用，后为体现其广泛性，改名为CommonJS，简称CJS

规范 是用来指导 实现的

所以，Node.js对CommonJS进行了支持和实现，让JavaScript在Node上运行时可以实现模块化开发

js
// env.js
exports.name = 'Ziu'
exports.age = 18
js
// utils.js
module.exports = {
  sum: function(x, y) {
    return x + y
  }
}
js
// index.js
const utils = require('utils.js')
utils.sum(1, 2) // 3

const { sum } = require('utils.js')
sum(1, 2) // 3

const { name, age } = require('env.js')
console.log(name, age) // Ziu 18

exports的本质

exports和require在Node中的本质

js
// utils.js
exports.a = 0

// 1s后修改a值
setTimeout(() => {
  exports.a = 1
}, 1000)

// 2s后检查a值
setTimeout(() => {
  console.log(exports.a) // 2
}, 2000)
js
// index.js
const utils = require('./utils')

console.log(utils.a) // 0

setTimeout(() => {
  console.log(utils.a) // 1
  utils.a = 2 // 反过来修改a值
}, 1500)

在上述代码中，utils对象中的属性a在一秒后被赋值为1，因此在index.js中输出utils.a得到了两次不同的结果

反过来，在index.js中修改导入的utils.a的值后，修改结果也会反映在exports.a上，输出的值为2

实际开发中不要修改导入模块中的变量，改变原模块中变量的值并不规范

module.exports

在Node.js中，真正常用的导出方式是module.exports

js
const name = 'Ziu'
const run = () => console.log(name + 'is running.')

module.exports = {
  name,
  run
}

二者的区别

既然如此，为什么还要存在exports这个概念呢？

如果module.exports不再引用exports对象了，修改exports对象也就没有意义了

js
// utils.js
module.exports = {
  name: 'Ziu'
}
exports.age = 18
js
// index.js
const utils = require('utils.js')
console.log(utils.name) // Ziu
console.log(utils.age) // undefined

当使用module.exports = { ... }后，模块中原有的exports不再被导入识别，导入的内容将变为module.exports指定的对象内容

require的本质

require是一个函数，可以帮助我们导入一个文件（模块）中导出的对象

这涉及到require在匹配路径后的查找规则：

分为三种情况：内置模块、自定义路径、包名

模块的加载过程

CommonJS的缺点

`,76),p=[o];function c(r,t,i,d,y,C){return n(),a("div",null,p)}const F=s(e,[["render",c]]);export{A as __pageData,F as default};