国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何工程化開(kāi)發(fā)大型angular2項(xiàng)目（上篇）

codeKK / 1143人閱讀

摘要：首先我們得有一個(gè)主心庫(kù)，這個(gè)庫(kù)十分重要，里面沒(méi)有業(yè)務(wù)邏輯的代碼，主要是平時(shí)開(kāi)發(fā)時(shí)所需要的所有腳本，以及的一些基本依賴。創(chuàng)建衍生庫(kù)因?yàn)槲覀兯许?xiàng)目圍繞主心庫(kù)而衍生出來(lái)的，所以衍生庫(kù)和主心庫(kù)的關(guān)心和關(guān)系一致。

如何工程化開(kāi)發(fā)大型angular2項(xiàng)目（上篇） 前請(qǐng)?zhí)嵋?/b>

目前前端項(xiàng)目越來(lái)越復(fù)雜，管理一個(gè)前端項(xiàng)目需要考慮的方面越來(lái)越多，例如工具選擇、項(xiàng)目構(gòu)建、代碼自動(dòng)review工具、代碼打包上線、開(kāi)發(fā)生產(chǎn)環(huán)境分離、項(xiàng)目結(jié)構(gòu)管理以及第三庫(kù)引入管理等等之類問(wèn)題。所以下面是我開(kāi)發(fā)angular2項(xiàng)目時(shí)遇到的一些問(wèn)題以及自己的一些解決方案以及項(xiàng)目管理的思路。這些內(nèi)容將會(huì)以一個(gè)系列展開(kāi)。

項(xiàng)目構(gòu)建篇

angular2官方提供ng cli構(gòu)建工具，但是投入使用后發(fā)現(xiàn)并不是符合我們需求。因?yàn)槲覀冎绊?xiàng)目是基于gulp整套工作流，所以一直在尋找與gulp相結(jié)合的ng2案例。后來(lái)找到一個(gè)angular-seed項(xiàng)目，于是我將該項(xiàng)目設(shè)立為種子項(xiàng)目，依據(jù)該種子項(xiàng)目我們開(kāi)發(fā)了7、8個(gè)angular2項(xiàng)目。下面簡(jiǎn)單介紹一下如何利用種子庫(kù)創(chuàng)建衍生庫(kù)，只要種子庫(kù)保持更新，其他庫(kù)可以同步保持更新.

建立種子庫(kù)

上面的圖畫(huà)得比較爛，我還是來(lái)好好解釋一下。首先我們得有一個(gè)主心庫(kù)，這個(gè)庫(kù)十分重要，里面沒(méi)有業(yè)務(wù)邏輯的代碼，主要是平時(shí)開(kāi)發(fā)時(shí)所需要的所有腳本，以及npm的一些基本依賴。另外一些共用組件，共用邏輯代碼（例如登錄驗(yàn)證等等）。主心庫(kù)創(chuàng)
立完后，我們需要建立一個(gè)upstream的遠(yuǎn)端指向angular-seed項(xiàng)目

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

平時(shí)我們想要更新主倉(cāng)庫(kù)時(shí)，只要git pull一下upstram遠(yuǎn)端，就可以保持最新了。如果不想人工手動(dòng)去更新的化可以交給jenkins定時(shí)去更新，這樣主心倉(cāng)庫(kù)永遠(yuǎn)是最新的了。

創(chuàng)建衍生庫(kù)

因?yàn)槲覀兯许?xiàng)目圍繞主心庫(kù)而衍生出來(lái)的，所以衍生庫(kù)和主心庫(kù)的關(guān)心和angular-seed關(guān)系一致。我們指定我們衍生庫(kù)的遠(yuǎn)端upstream為我們的主心庫(kù)，這樣只要主心庫(kù)是最新的，這樣所有衍生庫(kù)都可以保持同步更新。可以享受主心庫(kù)提供的共用配置和
業(yè)務(wù)邏輯。看上去過(guò)程比較繁瑣，其實(shí)只需要將整個(gè)操作過(guò)程的指令集合到bash腳本中，執(zhí)行腳本是指定參數(shù)名為你的項(xiàng)目名稱。這樣快速就可以構(gòu)建一個(gè)angular2項(xiàng)目，所以整套流程適合有復(fù)雜業(yè)務(wù)的項(xiàng)目。

git remote add upstream git@192.168.1.1:/git/main-base 
git fetch upstream
git merge upstream/master
項(xiàng)目開(kāi)發(fā)篇

既然我們構(gòu)建完項(xiàng)目后，那么馬上開(kāi)工吧。隨著前端項(xiàng)目越來(lái)越復(fù)雜，里面配置文件越來(lái)越多。因?yàn)殚_(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境需要調(diào)用服務(wù)端接口地址又是不一樣的，像我開(kāi)發(fā)微信項(xiàng)目的，開(kāi)發(fā)環(huán)境用測(cè)試的appid和生產(chǎn)環(huán)境的appid也是不一樣的。情況更嚴(yán)重的是我們每個(gè)客戶都有自己獨(dú)立的配置信息（所以開(kāi)始考慮多租戶模式，不然下去是大坑）。理想情況下：

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

執(zhí)行上述命令，就是啟動(dòng)開(kāi)發(fā)dev環(huán)境的配置。利用yargs這個(gè)node工具去接收我們傳遞過(guò)去的參數(shù)，以此來(lái)區(qū)分開(kāi)是開(kāi)發(fā)模式下還是prod模式下。下面貼一段代碼舉例一下：

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

export function templateLocals() {
  // 這里就是我們通過(guò)env-config變量獲取參數(shù)
  const configEnvName = argv["env-config"] || argv["config-env"] || "dev";
  const configPath = Config.getPluginConfig("environment-config");
  const baseConfig = getConfig(configPath, "base");
  // 依據(jù)dev和prod以及對(duì)應(yīng)的路徑獲取對(duì)應(yīng)的配置文件
  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接口能夠優(yōu)化打包出來(lái)的代碼，但是我們開(kāi)發(fā)時(shí)是不需要用到該接口如何去分離開(kāi)來(lái)呢？gulp有個(gè)好插件，完美解決該問(wèn)題，gulp-template。我們只要在我們

代碼中加入類似<%= BUILD_TYPE %>，這樣就可以賦值給BUILD_TYPE，我們可以合理得去控制。

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

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

關(guān)于開(kāi)發(fā)配置十分細(xì)碎，所以不做詳述，可以日后咨詢。

下篇預(yù)告

下篇會(huì)涉及項(xiàng)目目錄結(jié)構(gòu)管理，以及angular2在移動(dòng)端開(kāi)發(fā)的經(jīng)驗(yàn)，項(xiàng)目打包上線的經(jīng)驗(yàn)。

PS： 正在找工作，有意請(qǐng)加我qq：846432362。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/81019.html

相關(guān)文章

  • Angular 2 快速上手

    摘要：為了簡(jiǎn)單起見(jiàn)，在本文中將會(huì)使用。已經(jīng)實(shí)例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中，因此我們將在構(gòu)造函數(shù)中注入。 國(guó)內(nèi) Angular2 資料比較少，這里看到一篇不錯(cuò)的入門(mén)文章就分享過(guò)來(lái)了 —— Angular 2 快速上手，這里面還有很多有關(guān)于 Angular2 的文章，感興趣的朋友可以去看一看 目前angular2已經(jīng)來(lái)到了beta版，這意味著它已經(jīng)做好了...

    singerye 評(píng)論0 收藏0

  • 前端每周清單半年盤(pán)點(diǎn)之 Angular 篇

    摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤(pán)點(diǎn)之篇前端每周清單半年盤(pán)點(diǎn)之與篇前端每周清單半年盤(pán)點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來(lái)發(fā)布的前端每周清單...

    LeviDing 評(píng)論0 收藏0

  • JS框架 - 收藏集 - 掘金

    摘要：現(xiàn)在回過(guò)頭總結(jié)，才又進(jìn)一步的揭開(kāi)了閉包的一層后臺(tái)管理系統(tǒng)解決方案前端掘金基于系列的后臺(tái)管理系統(tǒng)解決方案。什么是繼承大多數(shù)人使用繼承不外乎是為了獲得基于的單頁(yè)應(yīng)用項(xiàng)目模板前端掘金小貼士本項(xiàng)目已升級(jí)至。 關(guān)于js、jq零碎知識(shí)點(diǎn) - 掘金寫(xiě)在前面： 本文都是我目前學(xué)到的一些比較零碎的知識(shí)點(diǎn)，也是相對(duì)偏一點(diǎn)的知識(shí)，這是第二篇。前后可能沒(méi)有太大的相關(guān)性，需要的朋友可以過(guò)來(lái)參考下，喜歡的可以點(diǎn)個(gè)...

    wenyiweb 評(píng)論0 收藏0

  • 架構(gòu) - 收藏集 - 掘金

    摘要：淺談秒殺系統(tǒng)架構(gòu)設(shè)計(jì)后端掘金秒殺是電子商務(wù)網(wǎng)站常見(jiàn)的一種營(yíng)銷手段。這兩個(gè)項(xiàng)目白話網(wǎng)站架構(gòu)演進(jìn)后端掘金這是白話系列的文章。 淺談秒殺系統(tǒng)架構(gòu)設(shè)計(jì) - 后端 - 掘金秒殺是電子商務(wù)網(wǎng)站常見(jiàn)的一種營(yíng)銷手段。 不要整個(gè)系統(tǒng)宕機(jī)。 即使系統(tǒng)故障，也不要將錯(cuò)誤數(shù)據(jù)展示出來(lái)。 盡量保持公平公正。 實(shí)現(xiàn)效果 秒殺開(kāi)始前，搶購(gòu)按鈕為活動(dòng)未開(kāi)始。 秒殺開(kāi)始時(shí)，搶購(gòu)按鈕可以點(diǎn)擊下單。 秒殺結(jié)束后，按鈕按鈕變...

    Riddler 評(píng)論0 收藏0

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    lily_wang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<