通常我們在寫 javascript 的時候會將元件或模組寫成獨立的 js 檔，接著只要在 Html 頁面上找個地方加入<script> Tag 就可以了。而現在進化到 ES6，更可以使用 export 或 import 的方式在 js 檔內引用其他 js 檔，有用過 require.js 都知道這就等於 require('<PATH>') 的引入方式。但我們現在拉回到 Angular 上，Angular 使用的是 Typescript 開發，運作方式也跟傳統 Web 開發方式不一樣，那要怎麼引入 3-Party的套件來用呢? 限量這邊有幾種方法提供參考。
你一定想說啊這個方法不就一開始就講過了!沒錯，是一模一樣的，因為基本上 Angular 也是基於在一個 index.html 頁面上運作，所以最簡單的方式就是回歸原始，在 index.html 上找一個地方放入 <script> Tag 就好了。
路徑加入到 angular-cli.json 的 styles 或 scripts 陣列裡，為什麼加到這裡就可以了呢?因為 angular-cli 會在 build 時候會使用 Webpack 將所有程式打包，包括 npm 安裝的 package, 自行撰寫的程式和其他外部引入的程式，其他外部引入的程式就是抓 angular-cli.json 的 styles 或 scripts 設定值，打包在 scripts.bundle.js 與 styles.bundle.js。
不相信的話，直接看看 Webpack 打包的結果：
npm install underscore.js --save
安裝後，你的 package.json 裏頭就會自動多出了剛剛安裝的套件名稱，node_modules 裏頭也會多出剛剛安裝的套件。接著然後呢?然後當就是好了啊，後面 Webpack 在打包的時候，會把安裝的套件打包在 venders.bundle.js，這邊要注意的是 Webpack 只會打包有在程式中真正使用到的套件，所以如果你只有安裝但沒用到的話，Webpack 是不會幫你打包的。
接著限量再針對方法3做一個進階的使用說明。
因為 Angular 使用 Typescript 撰寫，而使用 Typescript 最大的好處在於它可以讓我們加入型別的宣告與檢查，這樣 Coding 起來才不會像 javascript 一樣型別錯亂。另外 Typescript 也可以寫 Class (雖然 ES6 就有提供了)與其他 OO 相關的 Coding 方式，以這樣的方式，開發人員就能夠更容易的撰寫模組與套件。
針對自己寫的 Package 我們可以訂 Declaration File。Declaration File 為一個 ts 檔，裏頭定義了 function 或 class 的 interface，就像是一個套件的使用規格書，為什麼需要 Declaration File?那是因為我們在包 Package 的時候是包 js 檔而不是 ts 檔，所以你用 npm 下載下來的套件檔案都是 compile 過後的 js 檔，這樣在 Typescript 使用的時候不就無法做型別的檢查了，也沒有 intelligent sense，因此才需要 Declaration File 來 binding Typescript 與 package 的 js 檔。
在使用 npm 安裝套件的時候，記得要去 Check 是不是有提供 Declaration File。以前面安裝 underscore.js 作為例子，剛好運氣好 underscore.js 提供 @types/underscore (Declaration File)，所以在安裝的時候也要多安裝一個 @types/underscore。
npm install @types/underscore --save-dev
這裡會好奇為什麼用 save-dev ?因為 @types/underscore 是用來幫助我們開發時使用的，但是對於功能來說是不需要的，因此我們才放在 devDependencies 裡。接下來還沒結束，我們還必須告訴 Typescript 有哪些 Declaration File 可以使用，只要在 tsconfig.app.json 的 types 陣列加入 underscore 就 OK 了。
加入這行的實際意思就是告訴 Typescript 去抓 node_modules => @types => underscore 資料夾的 Declaration File。因為 @type 資料夾內放的都是 npm 套件的 Declaration File。
再來我們就可以在 ts 檔裡使用了，使用前記得要將 type import 進來，下圖可以看到我們使用的時候就跑出 intelligent sense。
經過了一番的講解後，相信對 Angular 的認識又前進了一步，以限量這些日子對 Angular 的摸索，只能說限量看到的還只是 Angular 的冰山一角，要完全模透它還真的是要花一大段時間阿。
P.S. 哈哈，總算在過年前刷一次存在感，已經很久沒 Po 文了，蓋步這邊累積了一堆技術或技巧等待被分享，只好等到明年再一篇篇吐出來了。
方法1. 直接在 Html 引入
你一定想說啊這個方法不就一開始就講過了!沒錯，是一模一樣的，因為基本上 Angular 也是基於在一個 index.html 頁面上運作，所以最簡單的方式就是回歸原始，在 index.html 上找一個地方放入 <script> Tag 就好了。
方法2. 在 angular-cli 裡加入設定
這個方法就跟有沒有用 angular-cli 有關了，基本上使用 angular-cli 來開發會比較好用且比較快，所以如果沒有使用 angular-cli 的朋友們可以跳過去了。第二種方法就是將我們的 script路徑加入到 angular-cli.json 的 styles 或 scripts 陣列裡，為什麼加到這裡就可以了呢?因為 angular-cli 會在 build 時候會使用 Webpack 將所有程式打包，包括 npm 安裝的 package, 自行撰寫的程式和其他外部引入的程式，其他外部引入的程式就是抓 angular-cli.json 的 styles 或 scripts 設定值，打包在 scripts.bundle.js 與 styles.bundle.js。
不相信的話，直接看看 Webpack 打包的結果：
方法3. 從 npm Server 上面裝 Package
第三種方法是限量比較推的，因為既然 Angular 都用 npm 當作套件管理工具了，沒用的話真的是很可惜，而且有 npm 幫你把套件管好好的，自己不用再純手工了。使用方式很簡單，在專案目錄下打開命令提示字元(如果用Visual Studio Code 的朋友們可以直接在視窗內打開整合式終端機)，然後用 npm 指令來安裝你要的套件，例如：npm install underscore.js --save
安裝後，你的 package.json 裏頭就會自動多出了剛剛安裝的套件名稱，node_modules 裏頭也會多出剛剛安裝的套件。接著然後呢?然後當就是好了啊，後面 Webpack 在打包的時候，會把安裝的套件打包在 venders.bundle.js，這邊要注意的是 Webpack 只會打包有在程式中真正使用到的套件，所以如果你只有安裝但沒用到的話，Webpack 是不會幫你打包的。
接著限量再針對方法3做一個進階的使用說明。
因為 Angular 使用 Typescript 撰寫，而使用 Typescript 最大的好處在於它可以讓我們加入型別的宣告與檢查，這樣 Coding 起來才不會像 javascript 一樣型別錯亂。另外 Typescript 也可以寫 Class (雖然 ES6 就有提供了)與其他 OO 相關的 Coding 方式，以這樣的方式，開發人員就能夠更容易的撰寫模組與套件。
針對自己寫的 Package 我們可以訂 Declaration File。Declaration File 為一個 ts 檔，裏頭定義了 function 或 class 的 interface，就像是一個套件的使用規格書，為什麼需要 Declaration File?那是因為我們在包 Package 的時候是包 js 檔而不是 ts 檔，所以你用 npm 下載下來的套件檔案都是 compile 過後的 js 檔，這樣在 Typescript 使用的時候不就無法做型別的檢查了，也沒有 intelligent sense，因此才需要 Declaration File 來 binding Typescript 與 package 的 js 檔。
在使用 npm 安裝套件的時候，記得要去 Check 是不是有提供 Declaration File。以前面安裝 underscore.js 作為例子，剛好運氣好 underscore.js 提供 @types/underscore (Declaration File)，所以在安裝的時候也要多安裝一個 @types/underscore。
npm install @types/underscore --save-dev
這裡會好奇為什麼用 save-dev ?因為 @types/underscore 是用來幫助我們開發時使用的，但是對於功能來說是不需要的，因此我們才放在 devDependencies 裡。接下來還沒結束，我們還必須告訴 Typescript 有哪些 Declaration File 可以使用，只要在 tsconfig.app.json 的 types 陣列加入 underscore 就 OK 了。
加入這行的實際意思就是告訴 Typescript 去抓 node_modules => @types => underscore 資料夾的 Declaration File。因為 @type 資料夾內放的都是 npm 套件的 Declaration File。
再來我們就可以在 ts 檔裡使用了，使用前記得要將 type import 進來，下圖可以看到我們使用的時候就跑出 intelligent sense。
經過了一番的講解後，相信對 Angular 的認識又前進了一步，以限量這些日子對 Angular 的摸索，只能說限量看到的還只是 Angular 的冰山一角，要完全模透它還真的是要花一大段時間阿。
P.S. 哈哈，總算在過年前刷一次存在感，已經很久沒 Po 文了，蓋步這邊累積了一堆技術或技巧等待被分享，只好等到明年再一篇篇吐出來了。
留言
張貼留言