前端工程搭建的三種手段
- 全程手動(dòng)，一點(diǎn)點(diǎn)自己搭建，對(duì)技術(shù)人員要求比較高咖杂，必須對(duì)框架有深入的理解和豐富的經(jīng)驗(yàn)，要能hold住工程搭建過程中的各種坑
- seed工程蚊夫，github上通常會(huì)有各個(gè)前端框架的種子工程诉字，選一個(gè)star多的即可，但是也需要開發(fā)人員理解各項(xiàng)配置知纷，種子工程issues存在處理不及時(shí)的問題
- 官方cli工程奏窑，它隱藏了所有的配置，開發(fā)人員不需要關(guān)心webpack等打包配置屈扎，專注自己的業(yè)務(wù)即可埃唯，但這也同時(shí)意味著失去了配置的靈活性，只能跟隨官方社區(qū)鹰晨，不過大多數(shù)情況下可以滿足我們的需求
為什么要用Angular Cli
僅以我們項(xiàng)目使用的工程對(duì)比墨叛，未必適用于所有種子工程
Angular Cli
Angular CLI是一個(gè)命令行界面工具，它可以創(chuàng)建項(xiàng)目模蜡、添加文件以及執(zhí)行一大堆開發(fā)任務(wù)漠趁，比如測試、打包和發(fā)布忍疾。
特性：
- 快速創(chuàng)建component, module闯传，service，class卤妒，directive等
- 自動(dòng)打包壓縮甥绿，搖樹優(yōu)化
- 熱部署（代碼修改后，自動(dòng)編譯刷新瀏覽器）
- sass则披，less的預(yù)編譯自動(dòng)識(shí)別
- 集成了開發(fā)環(huán)境共缕，測試環(huán)境，生產(chǎn)環(huán)境
開發(fā)環(huán)境搭建
- 安裝nodejs士复，如果你是全新環(huán)境图谷，最好直接裝發(fā)布的最高版本（寫這篇文章時(shí)，最新cli要求nodejs>=6.9）
- 安裝 Angular Cli
npm install -g @angular/cli (全局安裝)
安裝結(jié)束后阱洪，運(yùn)行 ng -v查看是否安裝成功 - 安裝開發(fā)工具便贵，推薦vscode
使用cli創(chuàng)建工程
- ng new my-app (my-app是你項(xiàng)目名稱)
等待一段時(shí)間，cli會(huì)幫你創(chuàng)建好工程目錄和所需的node_modules(老版本需要自己npm install安裝node_modules) - 打開工程冗荸，目錄結(jié)構(gòu)如下：
根目錄
借用ng官網(wǎng)介紹
- 在my-app文件夾根目錄下運(yùn)行ng serve承璃，你的第一個(gè)angular應(yīng)用就啟動(dòng)了
- 新建文件可以通過ng generate <type> [options]命令，簡寫 ng g
- Component ng g component my-new-component
- Directive ng g directive my-new-directive
- Pipe ng g pipe my-new-pipe
- Service ng g service my-new-service
- Class ng g class my-new-class
- Interface ng g interface my-new-interface
- Enum ng g enum my-new-enum
- Module ng g module my-module
其他ng命令就不在一一介紹俏竞，筆者更喜歡通過vscode等開發(fā)工具來編寫工
程（比如ng format格式化代碼绸硕，這類操作用ide工具可能更方便堂竟，每人開發(fā)喜好不同）
- 老司機(jī)們肯定要說了，我要配置proxy玻佩，我要啟動(dòng)樁服務(wù)器出嘹，別急，我們可以通過修改package.json文件咬崔，增加啟動(dòng)想要的參數(shù)税稼，ng serve相關(guān)參數(shù)參考官網(wǎng)介紹
筆者配置如下：
我希望啟動(dòng)時(shí)自動(dòng)啟動(dòng)瀏覽器 —open
我希望配置proxy —proxy-config
我希望啟動(dòng)打樁的服務(wù)器
我希望在修改代碼后瀏覽器自動(dòng)刷新 （根據(jù)官方文檔介紹 ng server支持熱部署，但是我的工程沒有生效垮斯，于是增加了 —poll配置）
proxy需要在node_modules同級(jí)目錄配置一個(gè)proxy.conf.json文件
配置完成后郎仆，使用npm start命令
插件引入
熟悉前端開發(fā)的童鞋，肯定對(duì)jquery兜蠕，bootstrap不陌生扰肌，那么在cli工程中如何引入他們呢，這也是接下來要介紹的重點(diǎn) .angular-cli.json
打開這個(gè)文件可以看到很多配置
app 應(yīng)用相關(guān)配置
e2e 端到端測試配置
lint 靜態(tài)檢查配置
test 單元測試
default ng generate命令以及啟動(dòng)端口的配置等等
- 啟動(dòng)端口配置：
- css引入配置熊杨，以bootstrap舉例
- js引入配置曙旭，以jquery，bootstrap舉例
需要注意的是.angular-cli.json中的js和css的文件引入是以src為相對(duì)目錄的晶府，并不是.angular-cli.json所在目錄
- sass和less不需要我們配置桂躏，cli工程會(huì)自動(dòng)編譯生成可用文件
工程打包
angular打包編譯有兩種場景，aot和jit川陆，推薦使用aot方式（這也是最新版本cli工程默認(rèn)編譯方式）剂习，參考這篇文章angular2 JIT and AOT
ng build 默認(rèn)是 dev模式編譯打包（angular有dev環(huán)境和prod環(huán)境兩種），編譯肯定是選擇prod環(huán)境
ng build 參數(shù)官網(wǎng)介紹
配置package.json文件
根據(jù)自己工程的大小较沪，配置 —max_old_space_size鳞绕，不然會(huì)提示內(nèi)存溢出錯(cuò)誤
運(yùn)行命令 npm run build 生成編譯文件，然后部署到服務(wù)器上即可
測試购对，靜態(tài)檢查
測試和靜態(tài)檢查就不詳細(xì)介紹了猾昆，cli主要是通過lint和test命令執(zhí)行的
在 tslint.json中配置檢查規(guī)則陶因，官網(wǎng)規(guī)則
總結(jié)
如果你不想配置繁瑣的webpack等等骡苞，angular cli值得你擁有，抱緊google大腿 O(∩_∩)O
