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

r囧r小猫 2022-06-16 03:09 275阅读 0赞

*前言：*

*在哪看到过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][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][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年已经成熟很多了，但是还有很长的路要走。

[github.com_AngularClass_angular2-webpack-starter]: https://github.com/AngularClass/angular2-webpack-starter
[angular.cn_docs_ts_latest_guide_style-guide.html]: https://angular.cn/docs/ts/latest/guide/style-guide.html