本章講解如何用CLI 創(chuàng)建Angular工程，創(chuàng)建的工程包含哪些文件以及這些文件的作用。

正常情況下創(chuàng)建一個項(xiàng)目：

1. 用PowerShell 或 運(yùn)行CMD 定位到你想存放項(xiàng)目的文件夾
2. 執(zhí)行命令：ng new pinduoduo （pinduoduo是項(xiàng)目名）
3. 命令開始執(zhí)行時，第一個問題是：是否添加路由？這邊選否
4. 第二個問題：選用哪個樣式？ 這邊選SCSS
5. 此時項(xiàng)目就開始創(chuàng)建，先是創(chuàng)建了一堆基礎(chǔ)架構(gòu)文件；然后開始下載依賴包，下載依賴包這個操作一般需要花費(fèi)點(diǎn)時間
6. 項(xiàng)目創(chuàng)建完之后文件夾中出現(xiàn)一個以項(xiàng)目名命名的文件夾

• • image.png

快速創(chuàng)建項(xiàng)目

從上面第5點(diǎn)可以看出，正常創(chuàng)建一個項(xiàng)目，在安裝依賴包這一步會需要很長時間。但是我想先快速創(chuàng)建一個項(xiàng)目，那么我們就可以用如下命令，可直接跳過安裝這個步驟，直接創(chuàng)建項(xiàng)目文件，這個過程大概幾秒即可完成。

ng new pinduoduo --skip-install --style css --routing false

此時可用VsCode打開項(xiàng)目，并執(zhí)行以下命令安裝依賴包

npm install

或

cnpm install

安裝完依賴包后，項(xiàng)目會出現(xiàn)一個叫node_modules 文件夾，這個文件夾就是用來存放所有依賴包的。

查看命令幫助

ng new 究竟支持哪些參數(shù)呢？在不確定的情況下，用--help命令，可查看。

ng new --help

如下,每個參數(shù)下面都有詳細(xì)的解釋

• • image.png

類似的，ng 支持哪些子命令呢，也可以用--help來查看

ng --help

如下：

• • image.png

我們在開發(fā)過程中，最常用的兩個命令：

ng serve

ng build

ng serve 啟動腳手架服務(wù)，啟動開發(fā)環(huán)境，默認(rèn)端口是4200.
如果想改變啟動端口如下：

ng serve --port 4300

如果想啟動時，直接在瀏覽器中打開，不需要再手動去瀏覽器中輸入，那執(zhí)行如下命令

ng serve --port 4300 -o      
ng serve -o

項(xiàng)目結(jié)構(gòu)和文件內(nèi)容詳解

• e2e
  e2e是End to End Testing （端到端測試）。ng e2e 編譯并啟動angular項(xiàng)目，然后使用Protractor運(yùn)行端到端測試

• node_modules
  angular項(xiàng)目依賴包存放目錄，執(zhí)行npm install / cnpm install 時會自動創(chuàng)建此目錄。

• src
  angular源碼文件夾
  -.editorconfig
  在不同的代碼編輯器中，維持相同的代碼風(fēng)格。看似不起眼的配置，其實(shí)用處非常大。比如我用VsCode，另一個同事用Sublime，我們想在看和編輯時都能保持代碼風(fēng)格一致，如：代碼縮進(jìn)2個空格。 就會用到這個配置文件了。

• .gitignore
  這個是我們在git中想忽略某些文件，比如我們在提交angular代碼時，要忽略掉node_modules、dist等文件夾。這是Angular CLI 默認(rèn)幫我們創(chuàng)建的gitignore文件，是比較全面的。當(dāng)然如果你自己添加了測試文件在本地，又不想提交，那么也可以配置到這個ignore列表中。

• angular.json
  這個是Angular項(xiàng)目的定義文件。

  • $schema
    Json Schema 是一個允許我們注解和驗(yàn)證JSON數(shù)據(jù)格式的工具，Angular CLI使用它來強(qiáng)化對于Angular Workspace schema的解釋說明
  • projects 部分
    這是Angular工作空間中所有項(xiàng)目的配置信息。如：
    - root 指定了項(xiàng)目文件的根文件夾，可能為空，但它指定了一個特定的文件夾
    - sourceRoot 指定項(xiàng)目源文件位置
    - prefix 當(dāng)CLI創(chuàng)建component 或者directive時，加前綴
    - architect 定義自動化命令，如build，輸出地址，資源文件地址等的配置
    - defaultProject 指定默認(rèn)項(xiàng)目，當(dāng)使用CLI 命令時，會顯示 defaultProject名字

• browserslist
  維持瀏覽器兼容性的一個文件。比如>0.5% 只支持市場占有大于0.5%的瀏覽器，小于就不支持；not IE 9-11，就是不支持IE 9-11 版本等等

• karma.conf.js
  單元測試的配置文件，使用Angular + Karma + Jasmine可以進(jìn)行前端的單體測試

• package.json
  任何一個NPM 軟件包都會有的一個約束文件，主要為以下幾部分：
  - name
  - version
  - scripts
  1. scripts 屬性是一個包含包運(yùn)行時生命周期各個環(huán)節(jié)需要執(zhí)行的腳本命令，key就是生命周期時間，value是運(yùn)行時節(jié)點(diǎn)執(zhí)行的命令
  - dependencies
  - devDependencies

  1. dependencies 和 devDependencies 有些區(qū)別，前者是導(dǎo)入引用的包，而后者是開發(fā)的時候需要用到，運(yùn)行時并不需要的包。比如Typescript，在開發(fā)時是需要的，編譯會把typescript編譯成Javascript。所以，在添加直接引用的時候，命令行如：npm i --save @angular/core。如果要添加開發(fā)依賴包，命令行如：npm i --save-dev @types/node
  2. 依賴包的版本，三位數(shù)分別是”大版本號“."小版本號"."補(bǔ)丁版本號"。
  3. 版本號前面還會出現(xiàn) ”~“ 或者 ”^{“，”~“代表至少保證版本號的前兩位是一樣的，至于補(bǔ)丁版本號可隨意，每次安裝時一般安裝最新的補(bǔ)丁版本號?！?/sup>“ 是鎖定大版本號，后兩位版本號安裝時也是安裝最新版本號。那如果版本號前面什么都沒有，那就表示嚴(yán)格安裝指定版本}

• package-lock.json
  鎖定直接依賴包中的每一個依賴包的各自依賴包，在換pc 或新的下載源時，按package-lock.json中的指定版本下載

• README.md
  Markdown格式的文檔,對項(xiàng)目的簡介

• tsconfig.json

• tsconfig.app.json

• tsconfig.spec.json

  1. tsconfig這三個文件都是對typescript的配置文件。比如typescript最終要編譯成Javascript，那需要指定編譯的目標(biāo)格式，路徑等
  2. tsconfig.json 是全局性的Typescript的配置，tsconfig.app.json和tsconfig.spec.json 都繼承自tsconfig.json。
  3. tsconfig.app.json 是針對項(xiàng)目開發(fā)時的配置
  4. tsconfig.spec.json是針對項(xiàng)目測試的配置

• tslint.json

  1. tslint.json 是用來做靜態(tài)代碼掃描的，一般在代碼編譯時會檢查代碼格式，或不符合最佳實(shí)踐的會掃描出來，所以這個文件是用來定義規(guī)則的。
  2. 比如quotemark 要求是單引號，typescript是支持單引號或雙引號的，但是如果指定了單引號，而寫雙引號，那么就會有綠色的波浪線表明格式不對。雖然編譯不會出錯，但不符合代碼格式要求
  3. 可以使用ng lint對整個代碼進(jìn)行掃描，可輸出哪些代碼不符合規(guī)范
     
     image.png