如何工程化开发大型angular2项目（上篇）

codeKK 发布于2019-08-20 12:30 / 1125人阅读

摘要：首先我们得有一个主心库，这个库十分重要，里面没有业务逻辑的代码，主要是平时开发时所需要的所有脚本，以及的一些基本依赖。创建衍生库因为我们所有项目围绕主心库而衍生出来的，所以衍生库和主心库的关心和关系一致。

如何工程化开发大型angular2项目（上篇） 前请提要

目前前端项目越来越复杂，管理一个前端项目需要考虑的方面越来越多，例如工具选择、项目构建、代码自动review工具、代码打包上线、开发生产环境分离、项目结构管理以及第三库引入管理等等之类问题。所以下面是我开发angular2项目时遇到的一些问题以及自己的一些解决方案以及项目管理的思路。这些内容将会以一个系列展开。

项目构建篇

angular2官方提供ng cli构建工具，但是投入使用后发现并不是符合我们需求。因为我们之前项目是基于gulp整套工作流，所以一直在寻找与gulp相结合的ng2案例。后来找到一个angular-seed项目，于是我将该项目设立为种子项目，依据该种子项目我们开发了7、8个angular2项目。下面简单介绍一下如何利用种子库创建衍生库，只要种子库保持更新，其他库可以同步保持更新.

建立种子库

上面的图画得比较烂，我还是来好好解释一下。首先我们得有一个主心库，这个库十分重要，里面没有业务逻辑的代码，主要是平时开发时所需要的所有脚本，以及npm的一些基本依赖。另外一些共用组件，共用逻辑代码（例如登录验证等等）。主心库创
立完后，我们需要建立一个upstream的远端指向angular-seed项目

git remote add upstream https://github.com/mgechev/angular-seed.git 
git fetch upstream
git merge upstream/master

平时我们想要更新主仓库时，只要git pull一下upstram远端，就可以保持最新了。如果不想人工手动去更新的化可以交给jenkins定时去更新，这样主心仓库永远是最新的了。

创建衍生库

因为我们所有项目围绕主心库而衍生出来的，所以衍生库和主心库的关心和angular-seed关系一致。我们指定我们衍生库的远端upstream为我们的主心库，这样只要主心库是最新的，这样所有衍生库都可以保持同步更新。可以享受主心库提供的共用配置和
业务逻辑。看上去过程比较繁琐，其实只需要将整个操作过程的指令集合到bash脚本中，执行脚本是指定参数名为你的项目名称。这样快速就可以构建一个angular2项目，所以整套流程适合有复杂业务的项目。

git remote add upstream git@192.168.1.1:/git/main-base 
git fetch upstream
git merge upstream/master

项目开发篇

既然我们构建完项目后，那么马上开工吧。随着前端项目越来越复杂，里面配置文件越来越多。因为开发环境和生产环境需要调用服务端接口地址又是不一样的，像我开发微信项目的，开发环境用测试的appid和生产环境的appid也是不一样的。情况更严重的是我们每个客户都有自己独立的配置信息（所以开始考虑多租户模式，不然下去是大坑）。理想情况下：

gulp build.dev --color --env-config dev

执行上述命令，就是启动开发dev环境的配置。利用yargs这个node工具去接收我们传递过去的参数，以此来区分开是开发模式下还是prod模式下。下面贴一段代码举例一下：

import { argv } from "yargs";
...

export function templateLocals() {
  // 这里就是我们通过env-config变量获取参数
  const configEnvName = argv["env-config"] || argv["config-env"] || "dev";
  const configPath = Config.getPluginConfig("environment-config");
  const baseConfig = getConfig(configPath, "base");
  // 依据dev和prod以及对应的路径获取对应的配置文件
  const config = getConfig(configPath, configEnvName);

  if (!config) {
    throw new Error("Invalid configuration name");
  }

  return Object.assign(Config, {
    ENV_CONFIG: JSON.stringify(Object.assign(baseConfig, config))
  });
}
// 具体代码可以克隆angular-seed去查看

另外angular2提供enableProdMode接口能够优化打包出来的代码，但是我们开发时是不需要用到该接口如何去分离开来呢？gulp有个好插件，完美解决该问题，gulp-template。我们只要在我们

代码中加入类似<%= BUILD_TYPE %>，这样就可以赋值给BUILD_TYPE，我们可以合理得去控制。

import { enableProdMode } from "@angular/core";
...

if (String("<%= BUILD_TYPE %>") === "prod") { enableProdMode(); }

关于开发配置十分细碎，所以不做详述，可以日后咨询。

下篇预告

下篇会涉及项目目录结构管理，以及angular2在移动端开发的经验，项目打包上线的经验。

PS：正在找工作，有意请加我qq：846432362。

GPU云服务器云服务器 python大型项目大型java开源项目大型电商项目java spark大型项目实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81019.html

Angular 2 快速上手

摘要：为了简单起见，在本文中将会使用。已经实例化了并且将它的模板载入到了元素中。中的依赖注入发生在该类的构造函数中，因此我们将在构造函数中注入。国内 Angular2 资料比较少，这里看到一篇不错的入门文章就分享过来了 —— Angular 2 快速上手，这里面还有很多有关于 Angular2 的文章，感兴趣的朋友可以去看一看目前angular2已经来到了beta版，这意味着它已经做好了...

singerye 2019-08-19 17:38 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
JS框架 - 收藏集 - 掘金

摘要：现在回过头总结，才又进一步的揭开了闭包的一层后台管理系统解决方案前端掘金基于系列的后台管理系统解决方案。什么是继承大多数人使用继承不外乎是为了获得基于的单页应用项目模板前端掘金小贴士本项目已升级至。关于js、jq零碎知识点 - 掘金写在前面：本文都是我目前学到的一些比较零碎的知识点，也是相对偏一点的知识，这是第二篇。前后可能没有太大的相关性，需要的朋友可以过来参考下，喜欢的可以点个...

wenyiweb 2019-08-20 16:27 评论0 收藏0
架构 - 收藏集 - 掘金

摘要：浅谈秒杀系统架构设计后端掘金秒杀是电子商务网站常见的一种营销手段。这两个项目白话网站架构演进后端掘金这是白话系列的文章。浅谈秒杀系统架构设计 - 后端 - 掘金秒杀是电子商务网站常见的一种营销手段。不要整个系统宕机。即使系统故障，也不要将错误数据展示出来。尽量保持公平公正。实现效果秒杀开始前，抢购按钮为活动未开始。秒杀开始时，抢购按钮可以点击下单。秒杀结束后，按钮按钮变...

Riddler 2019-06-24 17:54 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0