如果您正在使用angular, 但是沒有好好利用angular cli的話, 那麼可以看看本文.
Angular CLI 官網: https://github.com/angular/angular-cli
安裝angular cli:
npm install -g @angular/cli
不過首先要確保您安裝了比較新版本的nodejs.
今天主要通過以下幾個方面介紹Angular CLI:
- 生成專案
- 引數介紹
- 配置和自定義CLI
- 檢查和修復程式碼
生成新專案:
ng new my-app
這個命令會生成一個新的專案叫做my-app並把該專案的檔案放在my-app這個資料夾下.
專案生成完的時候別忘了cd進入到my-app目錄.
另一個選項是使用--dry-run引數:
ng new my-app --dry-run
使用這個引數呢, 不會真的生成專案, 而是會列印出來如果建立該專案的話哪些檔案將會生成.
另外一個常用的引數是--skip-install:
ng new my-app --skip-install
這個命令作用是, 生成完專案檔案之後不執行npm install這個動作.
不過以後還是需要手動執行npm install的.
使用--help引數可以檢視幫助:
ng new --help
下面我要生成一個專案, 先不執行npm install:
這個速度非常快, 然後使用我最喜歡的IDE VSCode將其開啟:
code .
看看整個的專案結構, 以及package.json:
scripts下面是一些預定義的專案命令:
start 是執行專案的意思, 執行npm start即可, 或者直接執行ng serve也可以.
npm build / ng build 是執行構建.......
不一一介紹了.
然後看下dependencies:
我們使用的是angular 5.2.0, 前面的^符號表示, 我們使用的版本號是大於等於5.2.0的但是肯定會小於6.
最下面是devDependencies, 裡面都是開發時用的工具庫, 可以看到angular cli就在裡面.
接下來看看angular-cli.json這個檔案:
angular-cli.json:
它是angular cli針對該專案的配置檔案.
裡面的prefix比較有趣, 它是所有生成的components和directives的預設字首.
可以檢視一下app.component.ts:
它的字首就是app.
如果想更改預設字首的話, 就可以修改angular-cli.json檔案裡面的prefix屬性值了, 如果改成sales, 那麼以後生成的components和directives的字首就是sales. 但是對已經生成的components/directives就不起作用了.
那麼如何保證生成的專案的components/directives字首是您想要的呢?
就是使用ng new的另一個引數 --prefix:
ng new sales-app --prefix sales
這時裡面生成的component的selector就是:
angular-cli.json檔案裡面的prefix:
在生成的專案裡可以看到, 同時還生成了spec檔案. 如果我不想讓我的專案生成spec檔案呢?
ng new也有這個引數--skip-tests:
ng new my-app2 --skip-tests
可以看到, 並沒有生成任何spec檔案.
ng new的引數一共有這些:
有幾個介紹過的, 其他的例如:
--skip-git: 生成專案的時候就不會把它初始化為git repository, 預設是初始化為git repository的.
--directory: 可以設定生成的目錄, 預設是使用的專案名稱.
--style: 可以設定樣式的型別, 預設是css, 例如可以改成scss.
也可以通過--inline-style把樣式的寫法設為行內樣式, 這個預設是false的.
下面我來生成一個使用scss樣式的專案:
可以看到生成的是styles.scss, app.component.scss檔案, angular cli不僅會生成scss檔案, 而且也會編譯它們.
檢視angular-cli.json, 可以在檔案的下方看到採用的是scss樣式檔案:
這樣, 以後生成的component的預設樣式檔案就是scss了.
最後我想介紹一下這個引數, --routing:
如果想手動為專案配置路由的話, 還是需要一些步驟的, 所以可以使用這個引數直接生成帶路由配置的專案.
看一下專案路由檔案:
再檢視一下app.module:
可以看到import了AppRoutingModule.
綜上, ng new 的這些引數可以在生成專案的時候作為命令的引數聯合使用, 其中有一些引數也可以在專案生成以後通過修改angular-cli.json檔案來做修改.
比較推薦的做法是:
在生成專案的時候使用: --routing, --prefix, --style, --dry-run引數. 首先通過--dry-run引數, 確保會生成哪些檔案是否正確, 確認後把--dry-run引數去掉, 生成檔案.
下面我生成一個專案, 並且執行npm install:
命令執行完, 可以看到如下的專案結構;
裡面有node_modules目錄了, 也就是所有的包都安裝好了, 接下來我可以執行該專案了:
ng serve -o
其中的-o(--open)參數列示執行專案的時候開啟預設瀏覽器.
檢視瀏覽器http://localhost:4200:
ng serve的優點是, 當程式碼檔案有變化的時候會自動重新構建並且重新整理瀏覽器, 您可以試一下.
另外一種配置CLI的方法 ng set.
前面我介紹了使用ng new引數和修改angular-cli.json檔案的方式來配置cli, 下面我介紹下通過ng set <屬性> <值> 來配置cli.
就拿當前這個專案來說, 它的預設樣式檔案型別是scss:
如果我在該專案目錄執行:
ng set defaults.styleExt css
那麼該專案的設定就會改變:
如果使用引數 -g(--global), 那就會進行一個全域性的配置, 這個配置會儲存在一個檔案裡(如果還沒有任何去安居配置的情況下這個檔案並不存在), 這個檔案應該在users/xxx目錄下, mac的話應該在home目錄下.
它不會影響到已經存在的專案. 但是如果新生成的專案不指定ng new的引數情況下, 預設就會採用全域性的配置:
Lint:
使用命令ng lint.
首先可以檢視一下幫助:
ng lint --help
--fix: 嘗試修復lint出現的錯誤.
--format: lint的輸出格式.
首先我針對上面的my-app6執行ng lint:
沒有問題.
然後我故意弄出來幾處錯誤/不規範的寫法:
然後再執行ng lint:
可以看到這些錯誤都被詳細的列了出來.
把格式化的引數加進去:
可以看到現在lint結果的顯示更直觀了一些.
下面執行ng lint --fix:
執行後lint的錯誤減少到了一個, 看下程式碼:
接下來還會寫幾篇angular cli的文章.