- 背景：
以前刀耕火種的年代
- 問(wèn)題/解決方案
代碼不夠健壯含蓉，可讀性差，沒(méi)有智能提示霸褒，使用 TypeScript，提高代碼質(zhì)量盈蛮，智能提示讓我們更加方便快捷
多人開發(fā)废菱，風(fēng)格不夠統(tǒng)一，質(zhì)量層次不齊抖誉，可以使用一些編碼規(guī)范檢查的工具殊轴，使得項(xiàng)目代碼風(fēng)格統(tǒng)一，質(zhì)量得到保證
Mock.js 這樣的插件完成假數(shù)據(jù)的編寫袒炉，開發(fā)階段時(shí)旁理，讓前端可以不依賴后端接口去完成相應(yīng)工作
想使用ES6+新特性，但是兼容有問(wèn)題我磁，借助babel
想使用Less/Sass/PostCss增強(qiáng)Css的編程性孽文，借助一些編譯工具
部署上線前需要手動(dòng)壓縮代碼以及資源文件驻襟，部署過(guò)程需要手動(dòng)上傳代碼到服務(wù)器 創(chuàng)建自己的自動(dòng)化構(gòu)建工作流，持續(xù)集成芋哭，自動(dòng)發(fā)布
概念
前端工程化是指遵循一定的規(guī)范和標(biāo)準(zhǔn)沉衣，通過(guò)工具去降低成本，提高效率的手段减牺。一切以提高效率豌习，保證質(zhì)量，降低成本為目的的手段都屬于工程化
工程化 != 工具
工程化是對(duì)我們整體項(xiàng)目的規(guī)劃和架構(gòu) 工具只是幫我們?nèi)?shí)現(xiàn)這種規(guī)劃的一種手段
creat-react-app vue-cli 是集成式的工程化方案拔疚，并不是單純的腳手架
不僅創(chuàng)建的項(xiàng)目斑鸦，約定了項(xiàng)目應(yīng)該是什么樣的結(jié)構(gòu)
提供了熱更新開發(fā)服務(wù)，自動(dòng)編譯 vue 的單文件組件草雕，代碼分格的校驗(yàn)
工程化應(yīng)該歸功于 node,由 node 強(qiáng)力驅(qū)動(dòng)
四個(gè)維度實(shí)現(xiàn)：
-
模塊化
- es6 export import 社區(qū)制定了一些模塊加載方案 CommonJS、AMD 和 CMD
- css 的模塊化 @import, css in js,css module
- 資源的模塊化 webpack 一切皆模塊
-
組件化
- 模塊化是文件層面上的固以，對(duì)代碼資源的拆分墩虹。而組件化是設(shè)計(jì)層面的，對(duì) UI 的拆封
- 組件化更重要是一種分治思想
- 組件化實(shí)現(xiàn)工程化用的工具就是 react,vue
-
規(guī)范化
- 目錄結(jié)構(gòu)的制定
- 有助于提高項(xiàng)目的邏輯結(jié)構(gòu)的合理性
- 對(duì)應(yīng)擴(kuò)展和合作
- 快速的資源定位
- js 規(guī)范
- 統(tǒng)一語(yǔ)法 用 hooks 就大家一起用 不要一會(huì)類組件一會(huì)函數(shù)組件
- eslint 統(tǒng)一在項(xiàng)目根目錄約定
- 格式化工具 -prettier
- 前后端接口的規(guī)范
- 接口文檔 一步到位各擼各的
- 接口返回?cái)?shù)據(jù)即顯示憨琳，前端僅做渲染邏輯處理
- 渲染邏輯禁止跨多個(gè)接口調(diào)用
- 前端關(guān)注交互诫钓、渲染邏輯，盡量避免業(yè)務(wù)邏輯處理的出現(xiàn)
- 請(qǐng)求響應(yīng)傳輸數(shù)據(jù)格式：JSON篙螟，JSON 數(shù)據(jù)盡量簡(jiǎn)單輕量菌湃，避免多級(jí) JSON 的出現(xiàn)；
- 定好通用的數(shù)據(jù)返回格式遍略，以及狀態(tài)值的規(guī)范
- 日期類型惧所，JSON 數(shù)據(jù)傳輸中一律使用字符串，具體日期格式統(tǒng)一 utc
- 目錄結(jié)構(gòu)的制定
自動(dòng)化
任何簡(jiǎn)單機(jī)械的重復(fù)勞動(dòng)都應(yīng)該讓機(jī)器去完成绪杏。
- 三個(gè)方面
- 項(xiàng)目腳手架幫我們自動(dòng)搭建初始項(xiàng)目結(jié)構(gòu)下愈，提供基礎(chǔ)模板，規(guī)范結(jié)構(gòu)蕾久，等
- 項(xiàng)目開發(fā)中實(shí)現(xiàn)熱加載势似，源代碼的變動(dòng)自動(dòng)響應(yīng)瀏覽器
- 項(xiàng)目自動(dòng)化構(gòu)建，自動(dòng)化部署 持續(xù)集成 自動(dòng)化測(cè)試
具體落實(shí)前端工程化
- 腳手架開發(fā)
- 自動(dòng)化構(gòu)建系統(tǒng)
- 模塊化打包
- 項(xiàng)目代碼規(guī)范化
- 自動(dòng)化部署
腳手架工具
創(chuàng)建基礎(chǔ)項(xiàng)目結(jié)構(gòu)僧著，提供項(xiàng)目規(guī)范和約定
保證相同的組織結(jié)構(gòu) 相同的開發(fā)范式 相同的模塊依賴
相同的工具配置 相同的基礎(chǔ)代碼沒(méi)有腳手架我們會(huì)有大量的基礎(chǔ)工作去做
團(tuán)隊(duì)成員對(duì)同一個(gè)腳手架新建的不同的工程都可以去維護(hù)修改添加需求履因，保證了成員靈活性和可調(diào)配性。
常用腳手架
React => create-react-app
vue => vue-cli
angular => angular-cli
yeoman 通用型腳手架工具
Plop 創(chuàng)建特定類型文件
腳手架的實(shí)現(xiàn)過(guò)程
腳手架工具其實(shí)就是個(gè) nodecli 應(yīng)用盹愚，創(chuàng)建腳手架過(guò)程就是創(chuàng)建 cli 應(yīng)用的過(guò)程
通過(guò)命令行交互詢問(wèn)用戶問(wèn)題栅迄；
根據(jù)用戶回答的結(jié)果，再結(jié)合一些模板文件杯拐，最后生成項(xiàng)目結(jié)構(gòu)霞篡。
實(shí)現(xiàn)過(guò)程
創(chuàng)建一個(gè)文件
mkdir my-cli
- 初始化 package.json
yarn init
- 在 package.json 中添加 bin 字段,指定 cli 的入口文件
"bin"："cli.js"
添加 cli.js
cli 文件必須有特定操作頭（如果是 Linux 或者 macOS 系統(tǒng)的話還需要修改此文件的讀寫權(quán)限為 755）
$ chmod 755 cli.js
#!usr/bin/env node
console.log('glh')
yarn link
my-cli
執(zhí)行完再終端就會(huì)看到打印結(jié)果為 glh
要通過(guò)命令行詢問(wèn)用戶世蔗、需要安裝 inqurier
yarn add inquirer
根據(jù)用戶輸入動(dòng)態(tài)生成文件
const inquirer = require('inquirer');
const path = require('path');
const fs = require('fs');
const ejs = require('ejs');
inquirer
.prompt([
{
type: 'input',
name: 'name',
message: 'Preject name',
},
])
.then(anwsers => {
// 模板目錄
const templDir = path.join(__dirname, 'templetes');
// 目標(biāo)路徑
const destDir = process.cwd();
fs.readdir(templDir, (err, files) => {
if (err) throw err;
files.forEach(file => {
ejs.renderFile(path.join(templDir, file), anwsers, (err, result) => {
if (err) throw err;
fs.writeFileSync(path.join(destDir, file), result);
});
});
});
});
上面過(guò)程大致意思就是在腳手架根目錄創(chuàng)建一個(gè) templetes 目錄，用來(lái)存放我們的模板文件朗兵，然后根據(jù)用戶輸入污淋，通過(guò) ejs 模板引擎的 renderFile 方法把我們的用戶輸入結(jié)果和模板相結(jié)合，輸出到我們腳手架使用時(shí)候文件的根目錄
自動(dòng)化構(gòu)建
一切重復(fù)的工作都應(yīng)該自動(dòng)化余掖，將我們生產(chǎn)環(huán)境的源代碼寸爆，轉(zhuǎn)化為生產(chǎn)環(huán)境可以運(yùn)行的代碼或者程序，我們把這樣一個(gè)過(guò)程稱之為自動(dòng)化構(gòu)建工作流盐欺。這樣的作用就脫離運(yùn)行環(huán)境帶來(lái)的兼容問(wèn)題赁豆，在開發(fā)階段使用一些提高效率的語(yǔ)法，規(guī)范和標(biāo)準(zhǔn)
NPM Script 是實(shí)現(xiàn)自動(dòng)化構(gòu)建工作流的最簡(jiǎn)單的方式
-
常見(jiàn)的自動(dòng)化構(gòu)建工具
構(gòu)建工具
Gulp
使用注意事項(xiàng)
- gulp默認(rèn)創(chuàng)建的任務(wù)為異步任務(wù)冗美，如果我們?cè)谌蝿?wù)中寫同步代碼必須傳入回調(diào)函數(shù)指定任務(wù)結(jié)束
// 4.0版本以上
exports.foo = done = {
console.log('同步代碼')
done()
}
- 任務(wù)組合
const { series, parallel } require('gulp')
// 串行模式
exports.foo = series(task1, task2)
// 并行模式
exports.foo = parallel(task1, task2)
- gulp的工作原理
The streaming build system
const fs = require('fs');
const { Transform } = require('stream');
exports.default = () => {
const read = fs.createReadStream('index.js');
const write = fs.createWriteStream('index.js');
const transform = new Transform({
transfor: (chunk, encoding, callback) => {
const input = chunk.toString();
const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '');
callback(null, output);
},
});
read.pipe(transform).pipe(write);
return read;
};
- 讀取流
- 轉(zhuǎn)換流
- 寫入流
