Angular 構建系統

2021-09-25 15:56:40 字數 957 閱讀 1602

angular框架、angular cli、angular應用程式所用到的元件都打包成npm packages,並通過npm registry進行分發。

npm安裝的包都會在package.json中,package.json檔案中的包被分為了兩組:dependencies是執行應用的基礎,devdependencies 只有在開發應用的時候才會用到,不需要部署到生產環境中。

package.json中的dependencies區包括:

angular cli是乙個命令列介面工具,可用於初始化、開發、構建和維護angular應用。可通過ng可執行檔案在命令列上呼叫此工具。angular cli的build、serve和test命令可以為不同的目標環境,把檔案替換成合適的版本。

每個工作空間中的所有專案共享同乙個cli配置環境,包含全專案工作空間級的配置檔案、根應用的配置檔案以及一些包含根應用的原始檔和測試檔案的子資料夾。

工作空間配置檔案

用途.editorconfig

**編輯器的配置

readme.md

根應用的簡介文件

angular.json

為工作區中的所有專案指定cli的預設配置,包括cli要用到的構建、啟動開發伺服器和測試工具的配置項,比如tslint,karma和protractor。欲知詳情,請參閱angular工作空間配置部分。

package.json

配置工作空間中所有專案可用的npm包依賴。有關此檔案的具體格式和內容,請參閱npm的文件。

package-lock.json

提供npm客戶端安裝到node_modules的所有軟體包的版本資訊。欲知詳情,請參閱npm的文件。如果你使用的是yarn客戶端,那麼該檔案就是yarn.lock。

tsconfig.json

工作空間中各個專案的預設typescript配置。

tslint.json

工作空間中各個專案的預設tslint配置。

使用Angular構建Chrome外掛程式

最近公司有業務需求需要做乙個chrome外掛程式,原本想著用jquery bootstarp搞定。但是由於已經使用angular已經太久了,重新再用jquery有點蛋疼。後面查了一下資料,發現有人用react寫過chrome外掛程式。仔細看了下,覺得實際上應該是一樣的原理。嘗試了一下angular ...

Angular學習 構建 部署

實際生產環境中,不可以把原始檔都放上去,然後裝angular cli,然後ng serve!自己原來就是這樣的 構建就是把源 打包成乙個靜態資源,放到伺服器上。1 先將ts,全部編譯成js 2 合併,不然每個資源,都會發乙個http請求 當然構建就是ng build即可 dist資料夾就是ok的東西...

使用yeoman構建angular應用

本文將介紹如何親手來完成乙個yeoman的generator,以實現快速構建最適合自己的專案。本文將實現的generator起名為ngtimo,依照yeoman的命名規矩就叫做generator ngtimo,是筆者這週末一晚上加一上午參考著yeoman官方給出的幾個generator genera...