題外話
最近簡直要忙死，所以停更了很久，你們會不會以為我人間蒸發了？
正文之前，請允許我先跑個題，就是關於忙的問題。
做了Freelance，每天過的比上班還累，這完全不是我想要的生活啊？所以痛定思痛，需要檢討一下自己：
- 首先仍然是目標，工作需要確定目標，生活也是一樣的。如果你的目標是做一番事業，那不得不說，忙才是正常的狀態。如果覺得累了，希望生活和工作能有一個平衡，那就要下決心改變自己的狀態。
- 關於工作，如果目標是掙大錢，而且從時間上更緊迫。那接單的時候，就考慮優先完成利潤高的。排序上利潤低的需求，還是要勇敢的說“不”。
- 如果你的目標是維護朋友、客戶的關系，希望將來能有更好的回報。那現在很多不掙錢的項目，做了也就做了，也沒有什么好抱怨的。更需要的，是調整自己的心態，接受現狀。
前端
工作終於告一段落，今天念叨念叨最近一個項目的小體會。
前端的工具鏈無比繁榮豐富，也帶來了大量的選型、學習的問題，這個在網上吐槽已久，我就不畫蛇添足了。
我本身過手的項目比較多，所以挺早就做了一些比較，單純從個人愛好入手（不代表性能、功能、框架結構的優勢）做了如下的划分：
| 業務類型 | 選型 |
|---|---|
| 功能性項目，更多偏向HTML層的處理 | JQuery.js |
| 小型商業邏輯項目 | vue.js |
| 大型或者將來可能快速成長的商務邏輯 | AngularJS |
最近的項目使用了AngularJS7，中間有了不少新的體會，分享出來希望能對大家有用。
AngularJS版本
通常AngularJS項目的構建、編譯、管理等都是由@angular/cli模塊完成的。這個模塊簡便的安裝方法是依賴npm, 而@angular/cli本身也依賴網絡，因此當AngularJS有了新版本，所有使用客戶端ng建立項目，也就自動使用了AngularJS的新版本。更不要說npm的升級中，也會直接升級了@angular/cli本身。
好在從AngularJS2之后，框架和語法糖方面的變化並沒有多大，如果類似AngularJS1到2那種劇烈的變化，相信很多人會直接哭死吧:)
即便如此，在一個復雜的項目中，不可避免仍然還會有不少版本升級帶來的兼容性問題。這時候如果是以前建立的項目，使用保留的package.json直接安裝依賴包，自動在老版本下工作就好，不一定必須升級到AngularJS新版本，通常這樣能省事不少。
有的時候會碰到一些意外，就是某些依賴包，可能在npm的庫中已經停止維護了，這時候依賴包的安裝將無法成功。這在大公司中通常不是問題，大公司大多都使用自己的包鏡像服務器，因此這種情況出現的少。但在中、小型公司，這是個很煩心的問題。我建議對於一些復雜的項目，盡可能的保留下來原有的node_modules 文件夾，畢竟跟硬盤容量比起來，這一點空間不算啥了，能讓你將來項目的維護輕松許多。
此外還可以考慮搜索多家的包服務器鏡像，比如我經常同時安裝cnpm、npm兩套工具，前者使用阿里雲的鏡像，后者則是官方的服務器，發現某些包失維的時候，換一個源試試，很可能會有驚喜。
有的時候還會碰到一些很特別的情況，必須使用老的AngularJS版本進行開發。這時候可以首先卸載當前的新版本@angular/cli, 然后使用npm 安裝制定的老版本，比如1.4版本的客戶端對應AngularJS4：
npm install @angular/cli@1.4
這樣之后使用ng新建的項目，將是AngularJS4的版本。當然這在工作中，也會碰到上面說的依賴包失維的問題，建議常用的功能包，平常自己就留意保留一些吧。
在AngularJS7中使用JQuery.js/Bootstrap等第三方功能庫
這幾個包是在使用傳統html頁面的時候常用的，JQuery.js在很多的框架中已經不建議使用了，而是使用框架的組件或組件通訊類功能來完成相似的功能。Bootstrap則有很多社區提供的AngularJS化的組件庫可以直接使用。
對於前者，雖然的確感覺上在AngularJS中使用JQuery沒有哲學上那么完美，但你不得不說在很多情況下的確用起來更方便，能大量的簡化代碼。對於后者，我個人的感覺把BootStrap庫AngularJS組件化會帶來額外的學習成本，感覺並不划算。所以介紹一下此類擴展庫的使用方法：
首先使用npm安裝需要使用的第三方擴展包：
npm install jquery bootstrap@3 bootstrap-switch createjs-module --save
隨后打開angular.json文件，在projects一節，找到你的項目名稱，隨后在其options中，scripts參數后面的數組中添加所有需要引用的js庫：
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/bootstrap-switch/dist/js/bootstrap-switch.js"]
需要注意，如果是AngularJS4, 文件名應當是.angular.json，scripts數組中添加的路徑，應當是../node_modules/xxxx這樣的路徑，因為AngularJS7和4的默認路徑是不同的。
第三步是為bootstrap這樣的UI庫添加額外的css，這個比較容易。直接在默認的主css文件：src/styles.css增加額外的引用就可以了,比如：
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
做完第三步，css可以立即生效，js文件則仍然需要在AngularJS主程序中引用，比如：
...
import * as _ from 'lodash';
import * as $ from 'jquery';
import 'bootstrap-switch';
import * as createjs from 'createjs-module';
...
$('.url1').attr('href', '/home');
注意這里面的引用並沒有指定js的路徑，路徑實際是由angular.json文件中我們剛才修改的scripts一節決定的。此外就是通常我們使用import都是標准的typescript的形式，比如：
import { Component, OnInit } from '@angular/core';
而我們對於JQuery.js庫的引用，則使用了引用非結構化js的方法，重點是引用“*”也就是所有內容，然后用“as $”命名成平常我們喜歡的樣子。對於bootstrap-switch庫因為是直接在bootstrap原型上添加功能，所以干脆連“ * as ”也省略了。
使用自己積累的js庫
在日常的工作中，大多程序員肯定都保存了不少的函數庫、功能庫。這些庫可以直接在typescript中引用，不需要改名字，引用的時候也不需要添加后綴。引用時候的路徑，使用當前typescript文件的相對路徑就可以。比如：
import { Lists } from '../jslib/lists';
在使用的時候，跟原來在js中引用也完全一致。通常說，比上面介紹的引用JQuery.js之類的引用會更容易。其實這大多是因為npm所管理的node_modules路徑規則太復雜所致，相比較npm模塊管理帶來的好處，你還是忍受的好:)
編譯中報錯的問題
通常AngularJS的編譯都能給出來比較清晰的錯誤提示，按圖索驥，能夠比較容易的解決問題。
但也有很多時候，AngularJS並不能給出清晰的提示，比如UglifyJS處理中所出現的Unexpected token: punc (() - ES6 parsing errors。
這時候可以在編譯的時候增加參數：
ng build -prod --source-map
此時編譯過程中，雖然信息仍然不夠完整，但能夠比較清楚的界定到時哪一個文件的哪一行出現了問題。相信再找錯誤，就容易多了。當然既然開發模式編譯時通過的，這時候的報錯往往也是兼容性問題或者更嚴格的語法限制。
編譯結果，在老版本ios設備無法使用的問題
為了支持更多的設備，兼容早期的ios瀏覽器是很有必要的。但原本運行良好的項目，移植到AngularJS后就無法 在早期ios瀏覽器中使用了。現象是屏幕全白，沒有任何內容和功能。
使用ios的聯機功能，可以檢查在瀏覽器中的報錯信息。ios聯機調試不是今天的重點，這里就跳過了。通常能得到錯誤信息為：
SyntaxError: Use of const in strict mode.
其實主要還是老版本瀏覽器不能很好支持新的js語法的問題。在AngularJS中呈現出來，是因為AngularJS默認使用typescript編譯。而通常的開發工具鏈是使用babel編譯，而后者的編譯結果，從向前兼容上，顯然做的更好一些。
解決辦法有很多，網上有很多使用babel替代typescript的方法，但總體都比較麻煩,如果不是特別必要，就別折騰了。
或者你還可以把js改寫到ts文件，估計你更不願意了，如果積累的庫比較多，真的會累死人:)
我的建議是，所有你自己添加的js包，集中存放在同一個目錄下，比如我例子中的jslib。然后在另外的工作目錄中，安裝babel的工作環境：
npm install -g babel-cli
npm init
npm install --save-dev babel-preset-es2015
在工作目錄中，新建一個.babelrc的文件，內容為：
{
"presets": [
"es2015"
],
"plugins": []
}
隨后就可以將原有的js文件都編譯一遍了（ts文件typescript處理的挺好，完全不需要使用babel），編譯方法示例：
babel ../some_dir/jslib -d ../some_angular_dir/jslib
這會編譯jslib中的所有文件，文件夾結構也會保留，所以編譯完成，直接用生成的jslib替換原來的文件夾。然后再使用AngularJS編譯就完全正常了。
最后
最后決定選擇一個更開心的生活，所以給自己放個假。頭一次，看着星光下閃爍的大海，聽着潮水細微而深邃的波動，感覺微微腥咸的海風輕柔的拂面。然后手指在鍵盤上跳動，心情也變得輕快了。所謂幸福，不過如此。