(三) Angular2项目框架搭建心得

前言:

在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的“潜规则”贼多,以及从1.*到2.*版本的面目全非,不过宽容点来看这个强大的框架,升级到ng2肯定是一件好事情,虽然截至目前ng2还存在或多或少需要完善的地方,但是ng2做到了留下并强化ng1好的部分,移除或改善其不好的部分,并且基于许多较新Web技术来开发,不去看从ng1迁移到ng2的门槛和工作量的话,ng2的编程体验是很酷炫的。

目前ng2已经在npm上活跃到了2.4.*版本,笔者也斗胆用来重构现有的一个ng1产品,目前开发还未完全完成,也已经有了一些ng2开发的心得,其给我的其中一个感觉就是,框架的搭建很重要,搭建好一个酷炫的ng2项目架构,已经可以说是成功了一半了。

本文目的就在于分享一下angular2搭配webpack的项目框架搭建心得。

一、前端模块化

ng2的开发可以说是官方强行模块化,毕竟使用了TS与ES6新特性。使用ng1开发推荐的写法就是每个controller啊service啊factory啊filter啊都放在单独文件中并包上立即执行函数来分隔作用域,如果是这种写法,迁移到ng2中能减少一些工作量,将不同服务或是组件到处import即可。

说白了ng2项目架构搭建的重难点就在于对前端代码模块化的运用。习惯了所有变量函数都直接定义在window下的话得花些时间来理解与运用。题外话JS/ES模块化的发展历程也是蛮酷炫的。

二、SystemJS与Webpack

ng2默认使用SystemJS作为模块化工具,在其官网上有推荐使用Webpack来代替,但其对Webpack下ng2的搭建提到的不多。

不管是SystemJS还是Webpack,起到的最根本的作用就是模块化ng2代码,所做的事情就是:通过配置让其知道某个ng2依赖的路径(比如@angular/http),当需要使用网络请求时只要在具体的service下引用这个依赖(import),SystemJS或者Webpack就会将其引入,然后就可以使用它内部提供的实例方法了。

ng1时代在不借助模块化工具的情况下,做法是先将angular.min.js引入,然后再其后面执行代码,而ng2配置好模块化工具后,页面引入的是SystemJS(Webpack)的脚本,然后异步加载后续需要的ng2模块。

至于Webpack区别于SystemJS的地方,简单来说Webpack所做的事不止是帮忙异步加载模块,还把资源的压缩包了。也就是说使用SystemJS的情况下,当使用到某个ng2组件时还得发起请求,请求组件依赖的脚本文件,视图模板以及样式表,而Webpack可以将所有的这些都打包压缩。

所以给出的建议就是,如果只是试水看看ng2酷炫的能力,SystemJS足够了,但如果是用来做产品,Webpack有巨大优势。

三、Webpack的配置

厉害的Webpack配置非常值得研究,笔者能力不够,借鉴了国外一个开源的angular2-starter项目,地址如下:

github.com/AngularClass/angular2-webpack-starter

简单说说Webpack工作的过程:

在npm下使用指令运行webpack,首先会在当前目录寻找webpack.config.js文件,里面就是需要编写的webpack的编译规则,包含代码入口,需要加载的文件(包括各种后缀的文件,需要哪一类都可以配置进去),以及最终输出的文件。

编译完成后只要将输出的几个脚本引用到页面中就完成了,甚至可以由webpack来输出一个index.html,作为网站的入口文件,其深层的工作原理非常值得研究。

四、目录结构与编程风格推荐

关于ng2项目的目录结构与编程风格的推荐,ng2官网的风格指南已经讲得非常完善,看完绝对能受益匪浅,地址如下:

angular.cn/docs/ts/latest/guide/style-guide.html

五、发布与部署

发布与部署不是什么难事,但是从来没发布过的话总会紧张的,大致过程就是:

1. 运行webpack命令将源代码生成为待发布代码(包含入口文件index.html、静态资源assets、主webpack脚本和其trunk脚本)

2. 找一个服务器部署发布的代码,任意服务器都可以,直接使用node服务器也完全没问题,更多的工作是如何维护。

六、浅谈Angular2核心思想

在开始开发ng2项目前,先认识一下其整体的工作过程是很有必要的。

下面是ng2官网给出的一张全景图:

ng2工作过程全景图

大致的思想就是:

1.按模块来划分。至少有一个根模块,包含一个根组件,一般用来做一些全局的事情,并统筹其他所有模块,具体的各个功能都划分成一个模块,各自工作,互不影响但能互相通信或是继承。

2.围绕组件进行开发。可以直接把组件理解为一个个页面的管理者,一个组件管理自己的一个页面,维护页面需要呈现的数据,并处理页面中触发的各种事件。

3.保留ng1的属性型指令。属性型指令用来做一些不依赖于具体视图的事情,比如通用的事件响应等。

4.服务依赖注入。服务的特性依然是全局单例,注入到具体组件后使用,不过如果在不同模块重复包含相同服务,也就都会有各自的新实例,其使用有小技巧。

5.使用管道来格式化数据的呈现。

6. ...

七、发现的几个问题

1. 第一个问题是针对上文提到的angular2-starter开源项目,其在windows下有一个尴尬的问题,就是经过webpack编译后会出现中文乱码。懵逼许久之后发现此项目原有的文件都是utf8无BOM编码,而windows下默认utf8编码都带有BOM。

2. 组件的切换。主要是路由切换时会从一个组件导航到另一个组件,此过程会销毁前一个组件再创建后一个组件,导致的问题是路由的切换动画总是会有一瞬间的空白页面(因为原组件被销毁了而新组建还未初始化),此问题在StackOverflow上有个别的曲线救国解决方案,但是还是希望ng2后续的版本更新能给出更优雅的官方解决方案。

3. ng2路由有两种形式,H5 pushState与#符号区分前后端路由两种形式。官方推荐前者,但前者显然会与服务器路由冲突(非node服务器情况下)。这个网上有一些解决方案,笔者采用的是将404状态默认重定向到项目首页(服务器端找不到路径则视为是请求首页并保持原有参数)。

总结

其实任何框架都有其长处和短处,深入使用都会遇到各种问题,ng2也是如此。ng2相对于2016年已经成熟很多了,但是还有很长的路要走。

相关推荐