Angular 2 + 折騰記 ：(1)初識Angular-cli[官方腳手架]及脫坑要點

CRPER發表於2019-03-01
Angular

前言

　
這個系列的進度有些跳躍性，我儘量直白點解釋，但是我不是官方文件，直入主題！！！！

什麼是Angular-cli

簡言之：就是NG團隊自行維護的一個｀腳手架｀[內建單元測試及webpack2打包工具等]　－－　這貨前身是ember-cli；

官網：cli.angular.io/
Github: github.com/angular/ang…
npm: www.npmjs.com/package/ang…

我最早是從beta18開始用的，截止beta28.3 -- 這個分支已經廢棄，已經遷移,之前npm install angular-cli不推薦；

目前最新的是v1.0.0正式版【2017-3-24】;從舊版本到rc期間坑了太多次，每次升級各種酸爽；
rc2開始基本變化不大，可以直接拿來用了。。

正式版的配置稍微有些改動，我比較了下基本不大，放心使用

安裝之前

  1. window下：
    • 安裝lts版本的nodejs[6.10.0] ， Angular-cli中的node-sass不支援7.x，裝不上的
    • 裝了visual studio 2015+及python2+ [node-sass及部分模組需要呼叫這兩個依賴進行編譯]
    • 或者採用國內的cnpm安裝,記得帶版本號，有時候不帶版本會安裝0.0.1版本，cnpm好像會把編譯好node-sass裝上，不用本地再次編譯 -- 親測多次可用
    • 或者安裝windows-build-tools:windows下的依賴庫，再執行官方安裝命令

  2. Linux下：

    • nodejs控制推薦用nvm來管理 ：github.com/creationix/…
      • 先下載nvm的指令碼，用curl或者wget都行，前者有些不預裝，後者基本都有
        • wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
        • curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
      • 記得重新讀取bash的配置檔案，因為指令碼沒法實時生效，用linux的source命令一下子就搞定了
        • source ~/.bashrc : 意思就是重新載入當前使用者的bash配置檔案
      • nvm的命令不多，仔細看看文件哈，我們這裡只需要穩定版本(lts)
        • nvm install --lts ： 之後node怎麼用就怎麼用哈

    • 其次，linux下推薦用yarn替代npm，使用起來體驗好很多，速度也快很多

      # 下載公鑰
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 

# 把源寫進去源請求列表
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 

# 我用的是deepin !!!! 支援一下國產，挺好用哈～～～～
sudo apt-get update && sudo apt-get install yarn複製程式碼

開發工具這些就不扯了，我選擇VSCODE

安裝

npm install -g @angular/cli -- 無壓力過牆的孩子推薦
或者
cnpm install -g @angular/cli@v1.0.0-rc.2 -- 國內淘寶源(cnpm的安裝自行搜尋)
或者
yarn add global @angular/cli -- 看網路了。。。

初始化專案

angular-cli可以初始化ng2或者ng4的專案，我這裡說2+；

腳手架的命令很多，我這裡只列出最常用的；

  • 新建東東
範圍 命令 作用
new ng new new_project 初始化新專案
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 新建一個模組
  • 測試及檢測
範圍 命令 作用
e2e ng e2e 跑自動化測試-自己寫測試測試用例
test ng test 跑單元測試 -- 自己寫
lint ng lint 呼叫tslint跑整個專案，可以收穫一堆警告和錯誤，--force --fix --format可以幫助格式和修復部分問題
  • 啟動

ng serve： 啟動腳手架服務，預設埠4200；自定義什麼看幫助額

  • 打包

ng build: 開發模式打包，呼叫的環境檔案是/src/environments/environments.ts;
ng build --prod: 以前呼叫aot打包還需要帶上--aot,從beta31開始，--prod模式下自動呼叫aot打包，
呼叫的環境檔案是/src/environments/environments.prod.ts

  • 彈出配置檔案(還原真實的配置檔案)

ng eject : 這個東西的配置很多，可以彈出各種各樣的源配置和檔案
我們看到的ng開頭的命令都是二重封裝的。。。有時候我們想要改原始檔或者看到原始配置是怎麼樣的這貨就用到了

生成的目錄樹小解釋

總結

  • 這個腳手架支援sass和less，手動改下.angular-cli.json就可以了。或者執行命令改下支援，，一個道理的
  • 當然可以配置介面反向代理，但是我感覺不實用，推薦還是把不同介面的url寫在不同的environment裡面，用nginx做反向代理！
    ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)這個老版本是支援的，現在不知道支不支援，寫法如下
{
  "/": {
    "target": "http://localhost:3000",
    "secure": false
  }
}複製程式碼
  • ng2+寫起來很清晰，各種注入~~歡迎品嚐。。。

相關文章