成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

如何工程化開發(fā)大型angular2項目(上篇)

codeKK / 1219人閱讀

摘要:首先我們得有一個主心庫,這個庫十分重要,里面沒有業(yè)務(wù)邏輯的代碼,主要是平時開發(fā)時所需要的所有腳本,以及的一些基本依賴。創(chuàng)建衍生庫因為我們所有項目圍繞主心庫而衍生出來的,所以衍生庫和主心庫的關(guān)心和關(guān)系一致。

如何工程化開發(fā)大型angular2項目(上篇) 前請?zhí)嵋?/b>

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

項目構(gòu)建篇

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

建立種子庫

上面的圖畫得比較爛,我還是來好好解釋一下。首先我們得有一個主心庫,這個庫十分重要,里面沒有業(yè)務(wù)邏輯的代碼,主要是平時開發(fā)時所需要的所有腳本,以及npm的一些基本依賴。另外一些共用組件,共用邏輯代碼(例如登錄驗證等等)。主心庫創(chuàng)
立完后,我們需要建立一個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定時去更新,這樣主心倉庫永遠是最新的了。

創(chuàng)建衍生庫

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

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

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

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

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

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

export function templateLocals() {
  // 這里就是我們通過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以及對應的路徑獲取對應的配置文件
  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)化打包出來的代碼,但是我們開發(fā)時是不需要用到該接口如何去分離開來呢?gulp有個好插件,完美解決該問題,gulp-template。我們只要在我們

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

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

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

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

下篇預告

下篇會涉及項目目錄結(jié)構(gòu)管理,以及angular2在移動端開發(fā)的經(jīng)驗,項目打包上線的經(jīng)驗。

PS: 正在找工作,有意請加我qq:846432362。

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

轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/81019.html

相關(guān)文章

  • Angular 2 快速上手

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

    singerye 評論0 收藏0
  • 前端每周清單半年盤點之 Angular 篇

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

    LeviDing 評論0 收藏0
  • JS框架 - 收藏集 - 掘金

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

    wenyiweb 評論0 收藏0
  • 架構(gòu) - 收藏集 - 掘金

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

    Riddler 評論0 收藏0
  • 2017年2月份前端資源分享

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

    lily_wang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<