Angular企业级开发(2)-搭建Angular开发环境

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本

1.集成开发环境

个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择。使用优秀的集成开发环境(Integrated Development Environment)能节省很多时间,而且编写代码更加高效。工欲善其事,必先利其器。

支持AngularJS较好的编辑器有以下:

  1. Visual Studio Code code.visualstudio.com 特点:免费,支持Windows/Mac/Linux三大平台
    图片 1
  2. Sublime Text3 https://www.sublimetext.com/ 特点:入门简单,插件多。支持三大操作系统平台。
    图片 2

  3. WebStorm https://www.jetbrains.com/webstorm/ 特点:支持三大平台,收费。可以可视化配置单元测试和端到端测试。语法提示也非常好。
    图片 3

  4. Netbeans https://netbeans.org/downloads/ 老牌IDE,PHP开发者的首选IDE。特点:免费;支持三大操作系统平台。
    图片 4
  5. 其他。还有重量级的Visual Studio 2015等等。

图片 5

2.构建工具

为什么需要构建工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

目前在前端开发过程中常用的构建工具有2种,一个是Grunt,另外一个Gulp。

图片 6

2.1 Grunt

图片 7
简介:Grunt生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个Grunt插件,然后将其发布到npm上吧。先看看入门文档吧。

特点:

  • Grunt有一个完善的社区,插件丰富
  • 它简单易学,你可以随便安装插件并配置它们
  • 你不需要多先进的理念,也不需要任何经验

一. Integration

下文摘自webpack中文网:

首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自动化处理开发中常见任务的,例如检查(lint),构建(build),测试(test)等。相对于打包器,任务执行器所面对的逻辑问题更为上层,你可以使用上层的工具来管理整个持续集成(CI),而把打包的部分交给webpack

webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

2.2 Gulp

图片 8
简介:gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务,而 Gulp 一切都通过代码实现。
特点:

  • 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。
  • 高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
  • 高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
  • 易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。

    ### 3.包管理工具

为什么需要包管理工具?
因为现在前端开发有更多的类库和框架使用,一般情况下,一个Web前端项目至少需要使用5个以上库和第三方组件。但是需要前端工程师一直关注这些类库和框架,而且在升级的时候能升级到特定的版本是一件很具有挑战性的工作。而且各个版本之间还有一些依赖的关系。所以为了解决这些问题,不同的团队开发了不同的包管理工具。而目前主流的包管理工具有以下3类:

本文由金沙官网线上发布于Web前端,转载请注明出处:Angular企业级开发(2)-搭建Angular开发环境

您可能还会对下面的文章感兴趣: