@文章來源：拉鉤大前端就業(yè)訓(xùn)練營-念念

前端工程化

• 工程： 一個(gè)工程的生命周期
  • 工程立項(xiàng)，需求分析，產(chǎn)品原型，開發(fā)實(shí)施，測試部署，上線運(yùn)行
• 工程化：完成項(xiàng)目過程中，用到的工具和技術(shù)
• 前端工程化：通過各種工具和技術(shù)，提升前端開發(fā)效率的過程
• 前端工程化包含內(nèi)容：
  • 腳手架工具
  • 自動化構(gòu)建
  • 模塊打包
  • 標(biāo)準(zhǔn)化規(guī)范
  • 自動化測試
  • 自動化部署

Node.js 基礎(chǔ)

• node.js 是給予 chromeV8 引擎的 javascript 運(yùn)行時(shí)
• runtime(運(yùn)行時(shí)-運(yùn)行環(huán)境)
  • 瀏覽器就是 javascript 的一個(gè)運(yùn)行環(huán)境
• 基于 chrome 的 V8 引擎
• Node.js 是除了瀏覽器之外還可以運(yùn)行 javascript 的環(huán)境
• 瀏覽器端的 javascript:
  • 響應(yīng)瀏覽器事件
  • 數(shù)據(jù)驗(yàn)證
  • DOM 操作
  • 不足：不能做文件操作
• Node.js 端的 javascript
  • Node.js 適合開發(fā)服務(wù)端的應(yīng)用層(BFF)
    • 為網(wǎng)站，APP,小程序等提供數(shù)據(jù)服務(wù)
  • Node.js 適合用于開發(fā)前端方向的各種工具
  • Node.js 可以用來做桌面應(yīng)用開發(fā)
    • 各種跨平臺的桌面開發(fā)(vscode,typora,insomnia)
• Node.js 給 javascript 插上了全棧編程的翅膀

Node.js APIs

• 腳本模式：
  • node path/index.js 回車
• 交互模式
  • node 回車進(jìn)入
  • 就可以直接編寫 js 代碼運(yùn)行
  • .exit ctrl+C + 2 退出
• Node.js 全局對象是 global
  • 在交互模式下，聲明的變量和函數(shù)都屬于 global
• node.js 下全局函數(shù)：
  • parseInt/parseFloat/isNaN/isFinite/eval
  • setTimeout/clearTimeout
  • setInterval/clearInterval
  • setImmediate/clearImmediate 立即執(zhí)行定時(shí)器 事件隊(duì)列之前執(zhí)行
  • nextTick 主線程的最后執(zhí)行

Node.js 模塊

• 模塊(包)是 node.js 的基本組成部分
• 內(nèi)置模塊：官方提供的，跟隨 node.js 一起安裝
• 自定義模塊：工程師自己寫的
• 第三方模塊： 社區(qū)維護(hù)的，需要單獨(dú)下載才能使用

內(nèi)置模塊

• console

  • log 日志輸出
  • table 表格形式輸出
  • time timeEnd 計(jì)算程序執(zhí)行的時(shí)間

• process 進(jìn)程

  • 提供了 node.js 進(jìn)程的信息并對其控制
  • version 查看 node 版本
  • arch 輸出操作系統(tǒng)架構(gòu) X64 X32
  • platform 輸出操作系統(tǒng)平臺
  • cwd() 獲取當(dāng)前目錄
  • env 環(huán)境變量
  • pid 獲取進(jìn)程編號 每次開啟進(jìn)程的時(shí)候會重置 進(jìn)程運(yùn)行的時(shí)候才有編號
  • kill(系統(tǒng)編號) 殺死進(jìn)程

• path 路徑 提供了路徑相關(guān)的操作函數(shù)

  • 使用之前需要引入 path 模塊
  • __dirname 獲取 當(dāng)前文件所在目錄
  • __filename 獲取當(dāng)前文件的完整目錄
  • extname(文件) 獲取文件的擴(kuò)展名
  • dirname(__filename) 獲取路徑中的目錄部分
  • basename(__filename) 獲取路徑中文件名
  • join(__dirname,'a') 合并路徑

• fs模塊 文件操作

  • fs.writeFile('文件路徑','寫入內(nèi)容',回調(diào)函數(shù)) 寫文件 清空之前的文件再次寫入
  • fs.readFile('指定目標(biāo)文件所在路徑',回調(diào)函數(shù)) 讀文件 默認(rèn)是十六進(jìn)制 toString()轉(zhuǎn)二進(jìn)制
  • fs.unlink(要刪除的文件,回調(diào)函數(shù)) 刪除文件
  • fs.appendwrite(文件路徑,寫入內(nèi)容,回調(diào)函數(shù)) 追加寫入 如果想要換行 加一個(gè) \n

• fs模塊 目錄操作

  • fs.mkdir(目錄路徑,回調(diào)函數(shù)) 創(chuàng)建目錄
  • fs.rmdir(目錄路徑,回調(diào)函數(shù)) 刪除目錄 只能刪除孔目錄
  • fs.rename(舊名字,新名字,回調(diào)函數(shù)); 重命名
  • fs.readdir(目錄路徑,回調(diào)函數(shù)) 讀目錄
    • fs.stat(路徑,回調(diào)函數(shù)) 判斷文件
    • stat.isDirectory() 是否為目錄
    • s
      tat.isFile() 是否為文件

• fs模塊 同步函數(shù) sync

  • writeFileSync
  • readFileSync
  • mkdirSync

• 文件流

  • 緩沖方式
  • 優(yōu)點(diǎn)：
    • 內(nèi)存效率提高
    • 時(shí)間效率提高
  • fs.createReadStream(文件) 讀取流
  • fs.createWriteStream(文件) 寫入流
  • readStream.pipe(writeStream); 把讀取流通過管道傳給寫入流

• http模塊

  • http.createServer 創(chuàng)建http服務(wù)
  • server.listen 監(jiān)聽端口

自定義模塊

• nodejs中某一個(gè)單獨(dú)的.js文件都是一個(gè)模塊
• 每個(gè)模塊中都有一個(gè)module變量，其代表當(dāng)前模塊
• module的exports屬性是對外的接口
  • 只要導(dǎo)出(module.exports)的屬性和方法才能被外部調(diào)用
• 使用時(shí)用require引入

第三方模塊

• 社區(qū)維護(hù)的模塊
• 前端工程化大部分都是第三方模塊
• 需要單獨(dú)去安裝
• npm 概述 node包管理工具
  • npm install -g 包名 下載
  • npm uninstall -g 包名 卸載
  • npm init 初始化一個(gè)項(xiàng)目
  • --save --save-dev
    • --save -S 開發(fā)和線上都需要的包
    • --save-dev -D 開發(fā)環(huán)境需要的包

腳手架工具

• 腳手架自動創(chuàng)建項(xiàng)目結(jié)構(gòu)
• yeoman
  • 創(chuàng)建項(xiàng)目的基礎(chǔ)結(jié)構(gòu)代碼
  • yo是yaoman的命令行管理工具
  • 生成器：yaoman中具體腳手架 - 針對不同項(xiàng)目不同的腳手架
    • generator-webapp 網(wǎng)站項(xiàng)目
    • generator-venv vue項(xiàng)目
    • generator-rn-toolbox react native項(xiàng)目

自動化構(gòu)建

• 構(gòu)建：源代碼 轉(zhuǎn) 生產(chǎn)代碼
• 為什么要構(gòu)建：
  • less sass 轉(zhuǎn) css
  • es6+ 轉(zhuǎn) es5
  • 代碼壓縮
  • 代碼風(fēng)格統(tǒng)一
• npm scripts 允許在package.json文件中，使用scripts定義腳本命令
• babel 轉(zhuǎn)換js
• 代碼風(fēng)格校驗(yàn)
  • 每個(gè)人寫代碼風(fēng)格不一樣
  • 項(xiàng)目提交時(shí)，需要保持統(tǒng)一的代碼格式
  • eslint js風(fēng)格
  • stylelint css風(fēng)格
    • stylelint path/filename.css
    • stylelint */.css

gulp基礎(chǔ)

• npm i -g gulp-cli

• npm init --yes

• npm install gulp -D

• gulpfile.js

• gulp <task-name>

• gulp.serier(串行)

• gulp.paralle(并行)

• gulp的文件操作

  • src(源) - pipe(管道,可以使用多次) - dest(目標(biāo))

• 構(gòu)建樣式文件

  • gulp-less less轉(zhuǎn)css
  • gulp-clean-css 壓縮css
  • gulp-rename 重命名

• css hack 與 autoprefixer

  • 保證css的兼容性

• html

• images

• 文件清除