前端工程化（一） Node.js基础

什么是前端工程化？前端工程化又有什么用呢？前端工程化就是在构建一个前端项目的时候，通过一些技术跟工具，来提升前端开发效率的过程。

Node.js 基础

简介

什么是node.js？

• node.js是除了浏览器之外，JavaScript的另一个运行环境。
• 就像JavaScript可以在浏览器端运行一样，JavaScript也可以才node.js上运行。区别在于：Node.js是根植于操作系统上的，提供的一些操作系统交互的APIs，例如：文件操作，web服务发布等。

node.js的作用

• 浏览器端的JS负责与浏览器端的功能交互，Node.js负责与服务器端的功能交互
• node.js适合用于开发前端方向的各种工具

node.js运行方式

• 脚本模式

在控制台运行 node 代码路径/文件名.js
例如：node ./nodejs/heloworld.js

• 交互模式（适合调试代码，相当于浏览器上的控制台）

在命令行中，node回车进入交互模式
运行代码，console.log(‘helloworld’); 回车输入helloworld
退出交互模式，两次ctrl+c或者输入.exit

使用

全局变量

在浏览器的JS中，全局对象是window；在Node.js下，全局对象是global

• 在交互模式下，声明的变量和创建的函数都属于global下的
  例：var a = 1; global.a //有值
• 在脚本模式下，声明的变量和创建的函数都不属于global下的
  例：var a = 1; console.log(global.a) //返回undefined

注意：DOM和BOM中的对象，在Node.js环境下不可使用，Node.js和浏览器端的API不相通

全局函数

JavaScript提供的全局函数在Node.js环境下都可用。

• JavaScipt语言 提供的APIs
  • parseInt/parseFloat/isNaN/evel...
  • 一次性定时器 ：var timer = setTimeout(回调函数，定时时间），clearTimeout(timer)
  • 周期性定时器： var timer = setInterval(回调函数，定时时间），clearInterval(timer)
• Node.js 环境提供的APIs
  • 立即执行定时器（在事件队列的开头执行）
    var timer = setImmediate(回调函数）
    clearImmediate(timer)
  • 进程立即执行定时器（在主进程的后边执行）
    process.nextTick(回调函数）

同步与异步

JS 是单线程模型，代码运行时，限制执行主程序中的任务，主程序执行完后再执行事件队列。
process.nextTick 是在主程序结束之后执行，setImmediate 则是在事件队列的头部执行

运行顺序.PNG

模块

模块（包）是Node.js中具有特定功能的对象，可以分成三类

• 内置模块（核心模块）：
  • 对应web端JS的宿主对象，例如：window，location，history等
  • 随着node.js一起安装
  • 官方文档 ：http://nodejs.cn/api/
• 自定义模块：自己编写的具有一定功能的模块
  • 文件模块：单独JS文件组成的模块
  • 目录模块：多个JS文件组成在一个目录下的模块
• 第三方模块
  • 对应web端的JS第三方库，例如jQuery，Bootstrap等
  • 使用必须先安装
  • 在Node.js中，大量的第三方模块用 npm 来管理

内置模块

1. console模块提供了一个简单的控制调试台，类似web浏览器提供的JavaScript控制台。

//以表格方式展示数据
var obj = { name: 'judy', age:'10' }
console.table(obj)
// 计时
console.time('for')
 for(var i = 0;i <= 100000; i++) {
 }
console.timeEnd('for');

2. process对象是全局变量，提供有关当前Node.js进程信息并对其进行控制。不需要使用require()。

//  获取操作系统架构  x64
console.log(process.arch)
// 当前系统平台信息 win32
console.log(process.platform)
// 获取当前文件所在目录
console.log(process.cwd())
// 环境变量
console.log(process.env)
// 自定义变量
process.env.NODE_ENV = "develop"
console.log(process.env.NODE_ENV)
// 获取当前进程的编号
console.log(process.pid)
// 杀死进程 
process.kill(进程编号)

3.path模块负责文件路径

• ./ 表示当前路径
• ../ 表示上一级目录
• __dirname 返回当前文件所在的目录
• __filename 返回当前文件的完整路径（目录+文件）

// 需要引入模块
const path = require('path')
// join 用于拼接多个路径部分
const temp = path.join(__dirname, "..")
// 获取路径中的文件名
console.log(path.basename(temp));
// 获取一个路径中的目录部分
console.log(path.dirname(temp));
// 获取一个路径中最后的扩展名
console.log(path.extname(temp));

4. fs模块主要负责文件基本操作

• 文件操作

// 引入
const fs = require("fs")
// 写文件:清空写入
fs.writeFile('文件路径',' 写入内容', 回调函数)
// 读文件
fs.readFile('文件路径', 回调函数)
//删除文件
fs.unlink('文件路径, 回调函数)
// 追加写入
fs.appendFile('文件路径', '写入内容', 回调函数)

• 目录操作

// 创建目录
fs.mkdir("./d", (err) => {
  if(err) throw err;
}
// 删除目录
fs.rmdir("./d", (err) => {
  if(err) throw err;
}
// 重命名目录
fs.rename(__dirname+'/d1', __dirname+'/d2', (err) => {
  if(err) throw err;
}
// 读取目录
fs.readdir(__dirname, (err,data) => {
  if(err) throw err;
  // data是数组
  data.map((d) => {
    console.log(d)
  })
}

• fs.stat 查看状态

  // 查看文件状态
  fs.stat(__dirname+"./a.txt", (err, stat) => {
    if (err) throw err;
    if (stat.isDirectory()) {
      // 判断当前文件是否是目录    
    } else if (stat.isFile()) {
      // 判断当前文件是否是普通文件
    }
  })

5. http模块，我们使用Apache 或 Nginx 来搭建服务端。在Node.js中也有搭建服务器的模块，就是http模块。

 // 引入 
const http = require("http")
// 创建服务器
const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text.plain;charset=utf-8')
  res.end("hello,node.js")
})
// 发布web服务
const port = 3000
const host = 'localhost'
server.listen(port, host, () => {
  console.log(`服务器运行在 http://${host}:${port}`)
})

自定义模块

在自定义模块中，只有导出（exports）的属性或方法才能被外部使用，没有导出的属性或方法是模块的私有方法，只能在模块内部使用。

// circle.js 声明的模块
const PI = 3.14
const perimeter = (r) => {
  return 2 * PI * r
}
// 模块内容导出后，才能被外部调用
module.exports = {
  perimeter
}

module 变量代表当前模块，是一个对象，exports属性是对外的接口。加载某个模块，其实是加载该模块的module.exports属性

模块的使用：

// 引入模块时，需要写入引入路径，require('circle')会报错
const circle = require("./circle")
// 调用模块中的属性或方法
const r = 10;
console.log(circle.perimeter(r));

注意，引入自定义模块，需要带有引入路径，否则报错

模块加载逻辑

模块加载逻辑.PNG

• package.json 是目录模块的描述文件

第三方模块

node.js的第三方模块是由社区维护的，需要单独安装，安装需要借助npm命令

npm

npm是包管理工具，会随着node.js一起安装，npm可以帮助我们下载（安装）包和包的依赖

• 默认npm镜像源是国外的，为了提高下载速度，可将npm镜像源设置为国内地址（淘宝镜像源）

# 修改npm镜像源
npm config set registry https://registry.npm.taobao.org
# 查看镜像源
npm config get registry

• 全局安装
  • 命令：npm install --global 简写npm i -g
  • window下，全局安装的包默认存在：C:\Users\当前用户名\AppData\Roaming\npm\node_modules 下
  • Mac 下，全局安装的包默认存在 /usr/local/bin/lib/node_modules 下
• 局部安装（安装项目包）
  1.创建项目目录
  2.进入项目目录
  3.初始化项目 npm init --yes （npm init会得到packaga.json文件）
  4.安装包
  npm install --save (简写：npm i -S)开发生成环境都使用
  npm install --save-dev (简写：npm i -D)只在开发环境使用

5. 命令行执行
   如果包安装在当前项目中（局部安装），则命令的执行路径是当前项目下的 .\node_modules\.bin 目录下。

   # 局部安装包的执行路径
   .\node_modules\.bin\lessc input.less output.css
   

   如果包是全局安装，则命令执行的路径也是全局的

   # 全局安装包的执行路径
   lessc input.less output.css