# Firefox IE已死，當前瀏覽器是chrome的天下是個不爭的事實。而這么多年過去了，chrome吃內存的問題依然很很很了不起。你一定想不到，在啟用了兩個chrome，打開了10個頁面的情況下， chrome竟然是這樣吃內存的：  如果你的內存內存吃緊，相信急需一個內存占用低的瀏覽器。而FireFox則能夠很好的滿足我們的需求。 ## Karma 在系統根目錄中存在一個名為`karma.conf.js`，這其中的Karma便是我們使用`ng t`時最最重要的測試工具。而在測試文件出現的`describe`、`beforeEach`、`it`、`expect`等則全部都是Karma的語法。 ```bash panjie@panjies-Mac-Pro first-app % tree -L 1 . ├── README.md ├── angular.json ├── e2e ├── karma.conf.js ?? ├── node_modules ├── package-lock.json ├── package.json ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ``` 也是當為我們自動啟動chrome，自動在啟動的chrome打開http://localhost:9876/?id=xxx，近而實現單獨運行某個組件的目的。 ## NODE 項目根目錄中還有一個`package.json`： ```bash panjie@panjies-Mac-Pro first-app % tree -L 1 . ├── README.md ├── angular.json ├── e2e ├── karma.conf.js ├── node_modules ├── package-lock.json ├── package.json ?? ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ``` 該文件為node.js項目的配置文件，在該文件中定義了`Karam`的引用。所以如果非要在層次在進行一個劃分的話：`package.json`是頂層配置，由于該配置的存在，我們的項目中才有了`Karam` 。 ## NPM RUN 我們可以使用`npm run`來啟動標準的node項目，我們當前的angular也是標準的node項目，所以也支持使用`npm run`來啟動: ```bash panjie@panjies-Mac-Pro first-app % npm run npm run Lifecycle scripts included in first-app: start ng serve test ng test available via `npm run-script`: ng ng build ng build lint ng lint e2e ng e2e ``` 由于`package.json`中以下代碼的存在： ```json { "name": "first-app", "version": "0.0.0", "scripts": { "ng": "ng", ?? "start": "ng serve", "build": "ng build", "test": "ng test", ?? "lint": "ng lint", "e2e": "ng e2e" }, ``` 使得我們可以諸如使用`ng test`來代替`npm run test`。所以我們使用`npm run test`全稱也是可以啟動單元測試的。 ```bash panjie@panjies-Mac-Pro first-app % npm run test > first-app@0.0.0 test /Users/panjie/github/mengyunzhi/angular11-guild/first-app > ng test ``` ## ng `ng`則是Angular的一個命令，該命令在運行時將讀取`angular.json`配置文件： ```json panjie@panjies-Mac-Pro first-app % tree -L 1 . ├── README.md ├── angular.json ?? ├── e2e ├── karma.conf.js ├── node_modules ├── package-lock.json ├── package.json ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ``` 在該文件中有如下配置： ```json "test": { "builder": "@angular-devkit/build-angular:karma", ?? "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", ?? ``` 此時Karma便啟動了。 ## Karma.config.js Karma配置文件中的如下代碼使得其在啟動時啟動chrome瀏覽器： ```json module.exports = function (config) { config.set({ ... plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), ?? ... ], ... browsers: ['Chrome'], ?? ... }) } ``` ## 啟動流程 所以當我們在執行`ng t`時，啟動流程實際上為：nodejs啟動 -> angular啟動 -> Karma啟動 -> Chrome啟動。 而若將Chrome改為Firefox，則需要以下幾步： ### 安裝Firefox 步驟略，請使用安裝包方式安裝。 ### 安裝launcher 進入項目根路徑，執行`npm install --save-dev karma-firefox-launcher@2.1.0` > 在些指定版本號是為了使大家學習的環境與教程的環境完全統一，在自己的項目開發中，應該省略指定的版本號。 ```bash panjie@panjies-Mac-Pro first-app % npm install --save-dev karma-firefox-launcher@2.1.0 + karma-firefox-launcher@2.1.0 updated 1 package and audited 1470 packages in 10.133s 84 packages are looking for funding run `npm fund` for details found 0 vulnerabilities ``` ## 配置Karma ```json +++ b/first-app/karma.conf.js @@ -8,6 +8,7 @@ module.exports = function (config) { plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), + require('karma-firefox-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage'), require('@angular-devkit/build-angular/plugins/karma') @@ -43,7 +44,7 @@ module.exports = function (config) { colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ['Chrome'], + browsers: ['Firefox'], singleRun: false, restartOnFileChange: true }) ``` 此時我們再啟動`ng t`，系統將為我們自動啟動`Firefox`瀏覽器。盡情享受`Firefox`為我們帶來的快感吧！  本章開始，我們將隨機的使用Chrome或Firefox瀏覽器為大家演示。 ## Chrome + Firefox 在正式的開發中，`ng t`的作用是保障組件、服務等正常的工作。所以我們也會如下定義:`browsers: ['Firefox', 'Chrome']`。這樣一來，在進行`ng t`時將同時啟動兩個瀏覽器，兩個瀏覽器中單元測試全部通過視為當前項目在兩個瀏覽器中均工作正常。 兩個瀏覽器在實際的使用中感覺的確不分伯仲，在同時啟動兩個瀏覽器情況下，Firefox的響應速度的確要更勝一籌！ ## 本節作業 1. 嘗試同時配置兩個瀏覽器，在`ng t`下隨意變更被測組件中的任意代碼來觸發瀏覽器的自動刷新機制。觀察兩個瀏覽器的響應時間。 2. 本節中我們不小心獲取到了Karam配置的官方文檔，你注意到它了嗎？ | 名稱 | 地址 | 備注 | | -------- | ------------------------------------------------------------ | ---- | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.6.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.6.2.zip) | |