前端工程目錄

2021-07-26 02:21:21 字數 1336 閱讀 4016

目前來說,按照概念,「前端工程

」至少應該是要解決以下幾個方面的問題:

1、提供專案開發所需的一整套執行環境,這和

ide作用類似,由於前端開發的特殊性,這個

「ide」

是乙個整合了多種語言和工具的開發環境;

2、資源管理,包括資源獲取、依賴處理、實時更新、按需載入、公共模組管理等。這裡也可以看成是元件化和模組化;

3、打通研發鏈路的各個環節,

debug

、mock

、proxy

、test

、build

、deploy

等,達到一次安裝,自動打包的目的。

4、解決前端效能問題,尤其是移動前端頁面的效能優化,實現元件化開發。

(注:此目錄圖來自

基於webpack搭建前端工程解決方案探索):

- src/ # 開發目錄

+ css/ # css資源目錄

- components/ # 標準元件存放目錄

- foo/ # 元件foo

+ css/ # 元件foo的樣式

+ js/ # 元件foo的邏輯

+ tmpl/ # 元件foo的模板

index.js # 元件foo的入口

+ bar/ # 元件bar

+ lib/ # 第三方純js庫

... # 根據專案需要任意新增的**目錄

- assets/ # 編譯輸出目錄,即發布目錄

+ js/ # 編譯輸出的js目錄

+ img/ # 編譯輸出的目錄

+ css/ # 編譯輸出的css目錄

a.html # 編譯輸出的入口a

b.html # 編譯處理後的入口b

+ mock/ # 假資料目錄

routes.js # 本地路由配置

webpack.config.js # webpack配置檔案

gulpfile.js # gulp任務配置

package.json # 專案配置

readme.md # 專案說明

這個目錄是由開發環境(配置工具

)自動生成的,這個專案目錄基本上體現了資源管理、模組管理、除錯、打包、發布這幾個重要環節。

編譯前端工程

不全棧 以後就會爛大街,失業 所以 忙了乙個下午前端 1.本機已經安裝nodejs 2.npm install g yo bower gulp registry 3.cd 專案根目錄 目錄下有 bower.json,gruntfile.js,package.json 4.npm install re...

xcode工程目錄

2.controllers 存放 mvc 設計思想下的檢視控制器 3.views 存放 mvc 設計思想下的自定義檢視 4.modles 存放 mvc 設計思想下的 modles 類 5.helpers 儲存檢視控制器助手類 分擔檢視控制器的資料處理 6.macros 存放專案中定義的巨集 7.ve...

前端學習目錄

js 深拷貝和淺拷貝js 深拷貝和淺拷貝 js中如何對list進行操作 去重,移除,獲取下標等去重,移除,獲取下標等 因chunk vendors過大導致首屏載入太慢的優化前端專案時因chunk vendors過大導致首屏載入太慢的優化 ifream和在vue 在div 中加html片段在vue 在...