目前來說,按照概念,「前端工程
」至少應該是要解決以下幾個方面的問題:
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 在...