Angular企業級開發(2)-搭建Angular開發環境

1.集成開發環境

我的或團隊開發AngularJS項目時，有不少JavaScript編輯器能夠選擇。使用優秀的集成開發環境(Integrated Development Environment)能節省不少時間，並且編寫代碼更加高效。工欲善其事，必先利其器。

支持AngularJS較好的編輯器有如下:

1. Visual Studio Code code.visualstudio.com 特色:免費，支持Windows/Mac/Linux三大平臺
   

2. Sublime Text3 https://www.sublimetext.com/ 特色：入門簡單，插件多。支持三大操做系統平臺。
   

3. WebStorm https://www.jetbrains.com/webstorm/ 特色：支持三大平臺，收費。能夠可視化配置單元測試和端到端測試。語法提示也很是好。
   
4. Netbeans https://netbeans.org/downloads/ 老牌IDE，PHP開發者的首選IDE。特色：免費；支持三大操做系統平臺。
   

5. 其餘。還有重量級的Visual Studio 2015等等。

2.構建工具

爲何須要構建工具?

一句話：自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。

目前在前端開發過程當中經常使用的構建工具備2種，一個是Grunt，另一個Gulp。

2.1 Grunt

簡介:Grunt生態系統很是龐大，而且一直在增加。因爲擁有數量龐大的插件可供選擇，所以，你能夠利用Grunt自動完成任何事，而且花費最少的代價。若是找不到你所須要的插件，那就本身動手創造一個Grunt插件，而後將其發佈到npm上吧。先看看入門文檔吧。

特色：

• Grunt有一個完善的社區，插件豐富
• 它簡單易學，你能夠隨便安裝插件並配置它們
• 你不須要多先進的理念，也不須要任何經驗

2.2 Gulp

簡介：gulp.js - 基於流(stream)的自動化構建工具。Grunt 採用配置文件的方式執行任務，而 Gulp 一切都經過代碼實現。
特色:

• 易於使用：採用代碼優於配置策略，Gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。
• 高效：經過利用Node.js強大的流，不須要往磁盤寫中間文件，能夠更快地完成構建。
• 高質量：Gulp嚴格的插件指導方針，確保插件簡單而且按你指望的方式工做。

• 易於學習：經過把API降到最少，你能在很短的時間內學會Gulp。構建工做就像你設想的同樣：是一系列流管道。

  3.包管理工具

爲何須要包管理工具?
由於如今前端開發有更多的類庫和框架使用，通常狀況下，一個Web前端項目至少須要使用5個以上庫和第三方組件。可是須要前端工程師一直關注這些類庫和框架，並且在升級的時候能升級到特定的版本是一件很具備挑戰性的工做。並且各個版本之間還有一些依賴的關係。因此爲了解決這些問題，不一樣的團隊開發了不一樣的包管理工具。而目前主流的包管理工具備如下3類：

3.1 Bower

https://bower.io/

Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

能夠看到Bower不只能管理框架，類庫，並且還能夠幫前端工程師管理靜態文件assets，或者實用的插件或小工具等內容。

• 全局安裝Bower
  npm install -g bower

• 使用Bower安裝包
  bower install <package>
  好比下面命令是安裝最新版本jQuery和Bootstrap
  bower install jquery
bower install bootstrap

3.2 npm

NPM:Node Package Manager.NPM最初只是做爲node.js的包管理工具，在前端開發過程當中，大可能是使用它安裝構建等相關工具，或者寫Node.js生成mock數據須要它安裝相應的express和body-parser等模塊。其實npm自己也是能夠做爲包管理工具來使用。好比使用npm安裝jQuery和Angularjs，命令以下所示:
npm install jquery
npm install angular

成功安裝以後，在當前目錄下面會有一個node_modules文件夾，有2個子文件夾，分別是jQuery和Angular。截圖以下所示：

3.3 yarn

facebook發佈的新一代包管理工具，旨在解決以往使用npm做爲包管理會遇到的一些問題。從其官方介紹能夠看到其重點強調的3個點：快、可靠、安全。
https://yarnpkg.com/

使用和參考:[http://imweb.io/topic/581f6c0bf2e7e042172d618a]

在Google趨勢裏面也能夠看到以上四種包管理工具使用狀況。由於Yarn和大數據裏面一個組件是相同的名字，因此這裏的yarn不必定就是yarn這個包管理工具。

聊聊Webpack

https://webpack.github.io/

Webpack 是一個前端資源加載/打包工具，只須要相對簡單的配置就能夠提供前端工程化須要的各類功能，而且若是有須要它還能夠被整合到其餘好比 Grunt / Gulp 的工做流。

Webpack完成的是打包的任務，它不負責包的安裝，安裝咱們仍是也藉助前面三者。
入門和使用方法能夠參考:Webpack從入門到上線

4.參考資料

1. 前端工程的構建工具對比 Gulp vs Grunt
2. Grunt中文網
3. Gulp中文網
4. npm、bower、jamjs 等包管理器，哪一個比較好用?
5. 扒一扒前端包管理器
6. NPM 與前端包管理