Angular-CLI 設定 Global

介紹 Global 設定

上次介紹了 Angular-CLI JSON 設定檔中 assets 的設定，讓我們不需再逐一的手動人肉複製需要的 assets，這次來介紹在透過 Angular-CLI 進行專案開發時，與全域有關的設定，主要有三種：Global Library Installation, Global Scripts, Global Styles。接下來我一樣參考了 Github 上的文件來做整理與介紹。藉此讓大家可以更了解 Angular CLI 的設定，以節省時間及方便專案內容的管理。

Global Library Installation

顧名思義就是全域的 JS 程式庫 ( Library ) 安裝，例如：相信大家一定很常用的 jQuery, Bootstrap 等 Framework，像這類 Framework 或 Library 通常需要在 html 中加入 script 標籤來進行載入到全域的 scope 下，而我們可以透過 Angular-CLI 的 JSON 設定檔做設定，我們知道 JSON 的格式本身就和 JS 的物件格式是一樣的，都有屬性 ( Property ) 與值 ( Value )，因此這邊我們可以使用 .angular-cli.json 中的 apps[0].scripts 以及 apps[0].styles 的屬性來進行設定。

就以 Bootstrap 4 來當範例吧，要使用 Bootstrap 4 之前，我們需要先做一些前置準備：

首先，透過 npm 來安裝 Bootstrap 4：

npm install bootstrap@next --save

安裝完成後，將需要的 script 檔案加到 apps[0].scripts 屬性的陣列中：

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

最後再加上 Bootstrap 的 CSS 檔案到 apps[0].styles 屬性的陣列中：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

如果這時候 ng serve 正在執行的話，請重新執行 ng serve ，然後試著在 Template 中加入我們熟悉的 Bootstrap 元件預覽看看囉，未來若有其他的程式庫要加入，也是一樣的方式加入即可，就是這麼的輕鬆方便 :)

Global Scripts

除了全域的框架或程式庫外，如果自訂的 JS 檔也要在 index.html 中新增 script 標籤在全域執行的話，加入的方式和上方介紹如何加入 Bootstrap 的方式是相同的。

例如 Google 分析 ( Google Analytics ) 或 FB SDK 等等相關的程式碼片段，要加入的話一樣在 apps[0].scripts 的屬性陣列中加入檔案的路徑即可：

"scripts": [
  "global-script.js",
],

我們也可以在建置輸出的時候進行檔名的變更，或者需要延遲載入的時候，可以使用以下的物件格式加到 apps[0].scripts 的陣列中：

"scripts": [
  "global-script.js",
  { "input": "lazy-script.js", "lazy": true },
  { "input": "pre-rename-script.js", "output": "renamed-script" },
],

input 指的是目標文件的路徑及檔名，output 則是要輸出的路徑及檔名，lazy 則是帶布林值，設定是否延遲載入。

Global Styles

透過 Angular-CLI 建立的空專案中，預設提供一個 styles.css 檔案，這個檔案主要是提供使用者加入全域的 CSS 樣式並且支援 CSS imports 的功能，當然，在前端開發，CSS 預處理器 ( CSS Preprocessor ) 相信是大家的好朋友，少了它，要進行切版真的會很不方便~~藍瘦香菇~~，因此在建立空專案的時候，記得要加上 --style=scss 的參數，一樣的方式，你也能選擇 sass/less/styl 等熟悉的預處理器，讓你能愉快的進行切版。

我們一樣可以透過.angular-cli.json 中的 app[0].styles 屬性加入其他的全域樣式，這些樣式檔會在執行的時候，以新增 link 標籤進行讀取，載入到 index.html 中：

"styles": [
  "styles.css",
  "more-styles.css",
],

我們也可以和 scripts 的設定一樣，以物件格式來設定變更檔名及延遲載入的需求：

"styles": [
  "styles.css",
  "more-styles.css",
  { "input": "lazy-style.scss", "lazy": true },
  { "input": "pre-rename-style.scss", "output": "renamed-style" },
],

透過 Angular-CLI 的自動化設定，協助我們節省很多瑣碎的時間，這些時間久了湊起來也是可以做很多事情的，除了努力工作之外，更要學會如何聰明工作，這也是很重要的一門課題喔！

以上這些介紹，希望可以為大家節省更多時間，寫出可讀性高，漂亮又好維護的程式碼 XD

Jeff Wu's Note