如何工程化開發大型angular2項目（上篇）

codeKK 發布于2019-08-20 12:30 / 1155人閱讀

摘要：首先我們得有一個主心庫，這個庫十分重要，里面沒有業務邏輯的代碼，主要是平時開發時所需要的所有腳本，以及的一些基本依賴。創建衍生庫因為我們所有項目圍繞主心庫而衍生出來的，所以衍生庫和主心庫的關心和關系一致。

如何工程化開發大型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大型項目實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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