什么是前端工程化祈噪？前端工程化又有什么用呢粥鞋？前端工程化就是在構建一個前端項目的時候掂为，通過一些技術跟工具裕膀，來提升前端開發(fā)效率的過程。
Node.js 基礎
簡介
什么是node.js菩掏？
- node.js是除了瀏覽器之外魂角，JavaScript的另一個運行環(huán)境。
- 就像JavaScript可以在瀏覽器端運行一樣智绸，JavaScript也可以才node.js上運行野揪。區(qū)別在于：Node.js是根植于操作系統(tǒng)上的，提供的一些操作系統(tǒng)交互的APIs瞧栗，例如：文件操作斯稳，web服務發(fā)布等。
node.js的作用
- 瀏覽器端的JS負責與瀏覽器端的功能交互迹恐，Node.js負責與服務器端的功能交互
- node.js適合用于開發(fā)前端方向的各種工具
node.js運行方式
- 腳本模式
在控制臺運行 node 代碼路徑/文件名.js
例如：node ./nodejs/heloworld.js
- 交互模式（適合調(diào)試代碼挣惰，相當于瀏覽器上的控制臺）
在命令行中，node回車進入交互模式
運行代碼殴边，console.log(‘helloworld’); 回車輸入helloworld
退出交互模式憎茂，兩次ctrl+c或者輸入.exit
使用
全局變量
在瀏覽器的JS中，全局對象是window锤岸；在Node.js下竖幔，全局對象是global
- 在交互模式下，聲明的變量和創(chuàng)建的函數(shù)都屬于global下的
例：var a = 1; global.a //有值 - 在腳本模式下是偷，聲明的變量和創(chuàng)建的函數(shù)都不屬于global下的
例：var a = 1; console.log(global.a) //返回undefined
注意：DOM和BOM中的對象拳氢，在Node.js環(huán)境下不可使用募逞，Node.js和瀏覽器端的API不相通
全局函數(shù)
JavaScript提供的全局函數(shù)在Node.js環(huán)境下都可用。
- JavaScipt語言 提供的APIs
- parseInt/parseFloat/isNaN/evel...
- 一次性定時器 ：var timer = setTimeout(回調(diào)函數(shù)馋评，定時時間）放接，clearTimeout(timer)
- 周期性定時器： var timer = setInterval(回調(diào)函數(shù)，定時時間）留特，clearInterval(timer)
- Node.js 環(huán)境提供的APIs
- 立即執(zhí)行定時器（在事件隊列的開頭執(zhí)行）
var timer = setImmediate(回調(diào)函數(shù)）
clearImmediate(timer) - 進程立即執(zhí)行定時器（在主進程的后邊執(zhí)行）
process.nextTick(回調(diào)函數(shù)）
- 立即執(zhí)行定時器（在事件隊列的開頭執(zhí)行）
同步與異步
JS 是單線程模型纠脾，代碼運行時，限制執(zhí)行主程序中的任務磕秤，主程序執(zhí)行完后再執(zhí)行事件隊列乳乌。
process.nextTick 是在主程序結束之后執(zhí)行，setImmediate 則是在事件隊列的頭部執(zhí)行
運行順序.PNG
模塊
模塊（包）是Node.js中具有特定功能的對象市咆，可以分成三類
- 內(nèi)置模塊（核心模塊）：
- 對應web端JS的宿主對象汉操，例如：window，location蒙兰，history等
- 隨著node.js一起安裝
- 官方文檔 ：http://nodejs.cn/api/
- 自定義模塊：自己編寫的具有一定功能的模塊
- 文件模塊：單獨JS文件組成的模塊
- 目錄模塊：多個JS文件組成在一個目錄下的模塊
- 第三方模塊
- 對應web端的JS第三方庫磷瘤，例如jQuery，Bootstrap等
- 使用必須先安裝
- 在Node.js中搜变，大量的第三方模塊用 npm 來管理
內(nèi)置模塊
-
console模塊提供了一個簡單的控制調(diào)試臺采缚，類似web瀏覽器提供的JavaScript控制臺。
//以表格方式展示數(shù)據(jù)
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()。
// 獲取操作系統(tǒng)架構 x64
console.log(process.arch)
// 當前系統(tǒng)平臺信息 win32
console.log(process.platform)
// 獲取當前文件所在目錄
console.log(process.cwd())
// 環(huán)境變量
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('文件路徑',' 寫入內(nèi)容', 回調(diào)函數(shù))
// 讀文件
fs.readFile('文件路徑', 回調(diào)函數(shù))
//刪除文件
fs.unlink('文件路徑, 回調(diào)函數(shù))
// 追加寫入
fs.appendFile('文件路徑', '寫入內(nèi)容', 回調(diào)函數(shù))
- 目錄操作
// 創(chuàng)建目錄
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是數(shù)組
data.map((d) => {
console.log(d)
})
}
- fs.stat 查看狀態(tài)
// 查看文件狀態(tài)
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")
// 創(chuàng)建服務器
const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text.plain;charset=utf-8')
res.end("hello,node.js")
})
// 發(fā)布web服務
const port = 3000
const host = 'localhost'
server.listen(port, host, () => {
console.log(`服務器運行在 http://${host}:${port}`)
})
自定義模塊
在自定義模塊中楞陷，只有導出（exports）的屬性或方法才能被外部使用，沒有導出的屬性或方法是模塊的私有方法茉唉，只能在模塊內(nèi)部使用固蛾。
// circle.js 聲明的模塊
const PI = 3.14
const perimeter = (r) => {
return 2 * PI * r
}
// 模塊內(nèi)容導出后，才能被外部調(diào)用
module.exports = {
perimeter
}
module 變量代表當前模塊度陆，是一個對象艾凯，exports屬性是對外的接口。加載某個模塊懂傀，其實是加載該模塊的module.exports屬性
模塊的使用：
// 引入模塊時趾诗，需要寫入引入路徑，require('circle')會報錯
const circle = require("./circle")
// 調(diào)用模塊中的屬性或方法
const r = 10;
console.log(circle.perimeter(r));
注意鸿竖，引入自定義模塊沧竟，需要帶有引入路徑，否則報錯
模塊加載邏輯
模塊加載邏輯.PNG
- package.json 是目錄模塊的描述文件
第三方模塊
node.js的第三方模塊是由社區(qū)維護的缚忧，需要單獨安裝悟泵，安裝需要借助npm命令
npm
npm是包管理工具，會隨著node.js一起安裝闪水，npm可以幫助我們下載（安裝）包和包的依賴
- 默認npm鏡像源是國外的糕非，為了提高下載速度，可將npm鏡像源設置為國內(nèi)地址（淘寶鏡像源）
# 修改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.創(chuàng)建項目目錄
2.進入項目目錄
3.初始化項目 npm init --yes （npm init會得到packaga.json文件）
4.安裝包
npm install <package-name> --save (簡寫：npm i <package-name> -S)開發(fā)生成環(huán)境都使用
npm install <package-name> --save-dev (簡寫：npm i <package-name> -D)只在開發(fā)環(huán)境使用
- 命令行執(zhí)行
如果包安裝在當前項目中（局部安裝），則命令的執(zhí)行路徑是當前項目下的 .\node_modules\.bin 目錄下持钉。
如果包是全局安裝衡招，則命令執(zhí)行的路徑也是全局的# 局部安裝包的執(zhí)行路徑 .\node_modules\.bin\lessc input.less output.css# 全局安裝包的執(zhí)行路徑 lessc input.less output.css
