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 與前端包管理