標籤：

搭建Angular開發環境

05-17
搭建Angular開發環境

來自專欄 Front-End Web Developer

1.集成開發環境

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

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

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

  2. Sublime Text3 The text editor youll fall in love with 特點：入門簡單，插件多。支持三大操作系統平台。

  3. WebStorm WebStorm: The Smartest JavaScript IDE 特點：支持三大平台，收費。可以可視化配置單元測試和端到端測試。語法提示也非常好。

  4. Netbeans 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

Bower

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個點：快、可靠、安全。

Yarn

使用和參考:[新一代包管理工具yarn - 騰訊Web前端 IMWeb 團隊社區]

在Google趨勢裡面也可以看到以上四種包管理工具使用情況。因為Yarn和大數據裡面一個組件是相同的名字，所以這裡的yarn不一定就是yarn這個包管理工具。

聊聊Webpack

webpack module bundler

Webpack 是一個前端資源載入/打包工具，只需要相對簡單的配置就可以提供前端工程化需要的各種功能，並且如果有需要它還可以被整合到其他比如 Grunt / Gulp 的工作流。

Webpack完成的是打包的任務，它不負責包的安裝，安裝我們還是也藉助前面三者。

入門和使用方法可以參考:Webpack從入門到上線

4.參考資料

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

推薦閱讀：

※平時遇到的前端筆試題和面試題
※Web前端開發-小米網站頭部導航條製作
※（四）一份友好樣式的緣起與歸宿
※橫行的前端(上)
※用Lerna管理多包JS項目

TAG:前端開發 | 前端入門 | AngularJS |