什么是前端工程化？前端工程化又有什么用呢？前端工程化就是在构建一个前端项目的时候，通过一些技术跟工具，来提升前端开发效率的过程。
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 来管理
内置模块
-
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');
-
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));
-
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()) {
// 判断当前文件是否是普通文件
}
})
-
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 <package-name> --global 简写npm i <package-name> -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 <package-name> --save (简写：npm i <package-name> -S)开发生成环境都使用
npm install <package-name> --save-dev (简写：npm i <package-name> -D)只在开发环境使用
- 命令行执行
如果包安装在当前项目中（局部安装），则命令的执行路径是当前项目下的 .\node_modules\.bin 目录下。
如果包是全局安装，则命令执行的路径也是全局的# 局部安装包的执行路径 .\node_modules\.bin\lessc input.less output.css# 全局安装包的执行路径 lessc input.less output.css
