項目配置分析

前不久學習了下angular2的基礎知識，按照官網要求構造了一個quik項目，這個項目能知足基本的angular開發，但對於實際大型的項目有不少功能都沒有實現或者是沒有很好的封裝和簡化，所以在網上搜到了這個項目 NiceFish  。這個項目的結構和功能很是強大，能知足幾乎全部的項目實際須要。在這裏感謝 -------大漠窮秋  ，接下來我將從架構組織，項目管理配置，代碼組織等方面來具體分析這個項目，但願以此來弄清楚一個真正的web現代項目。

 

以下是整個項目的結構：

 

angular-cli.json：

angular-cli是一個由google開發的工具集，裏面集成了大量的 NodeJS 模塊，例如：webpack，karma，asmine，typescript 編譯器，只要一條命令就能幫你自動建立項目的目錄結構、自動幫你生成 Component 骨架代碼並自動添加依賴、自動熱加載代碼、對 AngularMaterial2 組件庫提供了內置支持等等

(出自：http://www.imooc.com/article/13632)

配置文件說明以下 (出自：http://www.cnblogs.com/qingming/p/6961548.html)

{
  "project": {
    "name": "ng-admin", //項目名稱
    "ejected": false // 標記該應用是否已經執行過eject命令把webpack配置釋放出來
  },
  "apps": [
    {
      "root": "src", // 源碼根目錄
      "outDir": "dist", // 編譯後的輸出目錄，默認是dist/
      "assets": [ // 記錄資源文件夾，構建時複製到`outDir`指定的目錄
        "assets",
        "favicon.ico"
      ],
      "index": "index.html", // 指定首頁文件，默認值是"index.html"
      "main": "main.ts", // 指定應用的入門文件
      "polyfills": "polyfills.ts", // 指定polyfill文件
      "test": "test.ts", // 指定測試入門文件
      "tsconfig": "tsconfig.app.json", // 指定tsconfig文件
      "testTsconfig": "tsconfig.spec.json", // 指定TypeScript單測腳本的tsconfig文件
      "tsconfig":"tsconfig.app.json",
      "prefix": "app", // 使用`ng generate`命令時，自動爲selector元數據的值添加的前綴名
      "deployUrl": "//cdn.com.cn", // 指定站點的部署地址，該值最終會賦給webpack的output.publicPath，經常使用於CDN部署
      "styles": [ // 引入全局樣式，構建時會打包進來，經常使用於第三方庫引入的樣式
        "styles.css"
      ],
      "scripts": [ // 引入全局腳本，構建時會打包進來，經常使用語第三方庫引入的腳本
      ],
      "environmentSource": "environments/environment.ts", // 基礎環境配置
      "environments": { // 子環境配置文件
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": { // 執行`ng generate`命令時的一些默認值
    "styleExt": "scss", // 默認生成的樣式文件後綴名
    "component": {
      "flat": false, // 生成組件時是否新建文件夾包裝組件文件，默認爲false（即新建文件夾）
      "spec": true, // 是否生成spec文件，默認爲true
      "inlineStyle": false, // 新建時是否使用內聯樣式，默認爲false
      "inlineTemplate": false, // 新建時是否使用內聯模板，默認爲false
      "viewEncapsulation": "Emulated", // 指定生成的組件的元數據viewEncapsulation的默認值
      "changeDetection": "OnPush", // 指定生成的組件的元數據changeDetection的默認值
    }
  }
}

 

.editorconfig：

編輯器配置文件，當多人不一樣的編輯器開發同一個項目時，可讓每一個人不用去特意配置編輯器編輯風格，從而只在開發該項目時使用指定的編輯規範，好比tab鍵控制幾個空格等使得開發項目的代碼展現是統一風格的。

具體參考：http://www.jianshu.com/p/712cea0ef70e

 

.gitignore：告訴Git哪些文件不須要添加到版本管理中。具體參考：http://www.cnblogs.com/ShaYeBlog/p/5355951.html

 

dir-desc.txt：整個項目結構文件夾功能的大體描述

 

karma.conf.js：

當運行ng test時會用到它。

Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具可用於測試全部主流Web瀏覽器，也可集成到CI（Continuous integration）工具，也可和其餘代碼編輯器一塊兒使用。這個測試工具的一個強大特性就是，它能夠監控(Watch)文件的變化，而後自行執行，經過console.log顯示測試結果。Jasmine是單元測試框架，Jasmine 與 karma結合  執行自動化單元測試  參考：(http://blog.fens.me/nodejs-karma-jasmine/)

 

LICENSE:  做者對項目的描述

 

package.json：項目依賴npm管理文件(這個都知道)

 

protractor.conf.js：

• 基於Node.js的程序
• 使用Jasmine測試框架測試接口,針對AngularJS的應用程序
• 模擬真實的用戶操做行爲
• 針對AngularJS中的Element不須要作特殊的處理，普通HTML元素也一樣支持
• 智能等待，不須要爲頁面中的加載和同步顯示作特殊的等待時間處理

參考：http://www.jianshu.com/p/cb24e7fa8f56

 運行ng e2e的時候會用到它

 

README.md：關於項目的具體描述

 

tslint.json：檢查TypeScript代碼的可讀性，檢查ts代碼是否符合規範，參考https://www.npmjs.com/package/tslint

給TSLint和Codelyzer用的配置信息，可運行ng lint  ，   Lint功能讓咱們規範編碼風格。

 

yarn.lock：

yarn是facebook(2016年10月11日)開源的一款代替npm的js包管理工具

相比於npm來講，yarn有如下優點

• 一、安裝模塊速度快
• 二、支持離線模式(只要你安裝過此模塊，第二次安裝就會從緩存文件中直接複製過來)
• 三、同時兼容 npm 與 bower 工做流，並支持兩種軟件倉庫混合使用

(出自：http://www.jianshu.com/p/f05eabdf3ab6)

 

 

dist：app裏面源代碼通過aot編譯壓縮簡化處理後的可用於線上的最終的代碼

 

app：開發者編寫的代碼

 

assets：項目用到的靜態資源，能夠放圖片等任何東西，在構建應用時，它們全都會拷貝到發佈包中。(對於穩定的第三方類庫最好用CDN，由於其長期不會變化且加載速讀快)

 

environments：運行項目環境變量配置，項目運行狀況可分爲以下幾種：

1：ng serve    項目應用會構建好並打包成ES5可執行代碼，但不會壓縮，這在開發環境上能夠用到，調試時很容易找到問題出在那個代碼上，代碼具備可讀性

2：ng serve  --hmr  -e=hmr      按照1的方法代碼會運行很慢，一但開發的時候某段代碼修改了，會直接致使瀏覽器的總體刷新，爲此2的方法在1的基礎上，只要頁面哪一個模塊代碼修改了則只刷新那個模塊的試圖，大大加快了開發速度

3：ng serve  --prod       當開發完成後，咱們須要看一下代碼壓縮後項目的運行狀況以此來模擬線上的狀況，這時候整合後的代碼並無存在本地，而直接在內存中，咱們修改了代碼後，會自動刷新頁面來顯示修改後的效果

4：ng  build  --prod     當模擬線上的效果沒有錯誤後，咱們能夠構建應用將  ES5可執行的壓縮整合的代碼(此代碼是通過AOT 和搖樹優化的)放在dist目錄裏，將dist目錄能夠總體上傳到線上服務器，尤爲在先後端分離項目中有很大的做用

 

mock-data：項目須要的json數據，可模擬後臺數據

 

hmr.ts：angular 模塊異步熱更新的配置文件

 

index.html： 項目首頁，引導頁面

 

main.ts：angular項目的模塊入口　　

 

tsconfig.json：將編寫的ts代碼編譯成es5代碼的相關配置信息

 

polyfills.ts： 不一樣的瀏覽器對Web標準的支持程度也不一樣。 填充庫（polyfill）能幫咱們把這些不一樣點進行標準化。（出自：http://blog.csdn.net/qq_34645412/article/details/77145127）