序言
現在前端的技術越來越雜,也越來越細了,以至於每次看完文檔都會有個錯覺,就是自己差不多會了.真正去做項目的時候又是重復之前的步驟.
之前寫Java的時候，會習慣性的看看源碼，看完之后會對知識掌握的更牢靠，並且茅塞頓開的感覺簡直妙不可言。再回想做前端的這段時間，確實時是自己浮躁了。
我挑選了element做為學習目標的目的有二：
1.element是一款Vue的UI框架,它可以將我的CSS,JavaScript,Vue知識糅合在一起。
2.之前項目上實現的前端技術架構不太好,一直覺得自己眼界低了.希望通過學習可以將已有的架構重構,來讓我們團隊的兄弟可以工作的更舒服。
文章會持續更新，感謝element團隊,也感謝各位的閱讀！
目錄結構
個人覺得,對於不同級別的程序猿來說,他們在讀項目的文件結構時所得出的信息絕對是不一樣的.首先閱讀目錄結構絕對是簡單了解一個項目最快捷的方法.
一個項目中好的目錄結構絕對是必不可少,下面我們先來看看element的源碼版和發布版的目錄結構,以此入門
// 源碼開發包目錄結構
element
├──.github // github的ISSUE等文件模板
├── build // webpack編譯配置文件等
├── examples // 官方主頁項目包
├── lib // 打包后文件目錄
├── node_modules // 模塊依賴目錄
├── packages // 組件的源碼目錄
├── alert // 具體組件源碼包
├── src // Vue組件包
├── index.js // 入口文件
├── src // 源碼目錄
├── directive // 實現滾輪優化，鼠標點擊優化
├── locale // i18n國際化 ├── mixins // Vue混合器 ├── transition // 樣式過渡效果 ├── utils // 工具類包 ├── index.js // 源碼入口文件 ├── test // 測試目錄 ├── unit // 單元測試目錄 ├── coverage // 單元測試覆蓋率包 ├── specs // 測試用例源碼包 ├── index.js // 測試入口 ├── karma.conf.js // karma配置文件 ├── utils.js // 工具類 ├── types // typescript文件包 ├── .babelrc // babel配置文件 ├── .eslintignore // eslint配置忽略文件 ├── .eslintrc // eslint配置 ├── .gitignore // git忽略文件 ├── .travis.yml // 持續構建配置 ├── package.json // npm包核心文件 ├── components.json // 組件列表json ├── yarm.lock // yram版本控制文件 ├── package-lock.json // npm包版本控制文件 ├── postcss.config.js // postcss配置文件再看了源碼開發包后,我們再來看看打包后的項目,也就是咱們平時用的element-ui目錄結構如何?這樣做的好處是大致可以看出源碼包的構建工具到底做了什么?
// 發布版本包目錄結構
element-ui
├── lib // 打包后文件目錄
├── packages // 組件的源碼目錄
├── alert // 具體組件源碼包
├── src // Vue組件包
├── index.js // 入口文件
├── src // 源碼目錄
├── directive // 實現滾輪優化，鼠標點擊優化
├── locale // i18n國際化 ├── mixins // Vue混合器 ├── transition // 樣式過渡效果 ├── utils // 工具類包 ├── index.js // 源碼入口文件 ├── types // typescript文件包 ├── package.json // npm包核心文件package.json
在閱讀源碼前,過一遍package.json是非常有必要的.package.json描述了項目名稱、版本號、所依賴的npm包以及項目不同生命周期時構建工作的配置等,在讀完之后你會對發現之前目錄結構學習上一些模糊不清的文件慢慢漏出了真面目!.
1.基礎信息
通過package.json中的基礎信息,可以讓我們看出平時我們通過npm安裝的入口文件是哪個,也可以看到unpkg引入時到底引入的是誰?
{
"name": "element-ui", # 項目名稱 "version": "2.4.3", # 項目版本號 "description": "A Component Library for Vue.js.", # 項目描述 "main": "lib/element-ui.common.js", # 當使用require('module')時返回的主文件 # 模塊下的文件名或者是文件夾名,如果是文件夾,則文件夾下所有文件也會被包含(除非文件被另一些配置排除) "files": [ "lib", "src", "packages", "types" ], "typings": "types/index.d.ts", # typescript文件入口 "faas": { "domain": "element", "public": "temp_web/element" }, "repository": { # git倉庫地址 "type": "git", "url": "git@github.com:ElemeFE/element.git" }, "homepage": "http://element.eleme.io", #通過gh-pages發布到github的主頁地址 "keywords": [ #npm搜索時的關鍵詞 "eleme", "vue", "components" ], "license": "MIT", #MIT開源協議 "bugs": { "url": "https://github.com/ElemeFE/element/issues" #BUG提交郵箱 }, "unpkg": "lib/index.js", "style": "lib/theme-chalk/index.css", }2.依賴關系
依賴關系可以讓我們對大局上有些把握,至少讓我們心里有點數,知道大概用了哪些技術,不然看到各種require之后反而會一臉懵圈,影響學習進度和思路.
依賴關系還有一個重要的是版本信息,尤其是webpack這些構建工具的版本,格外注意!
{
"dependencies": { "async-validator": "~1.8.1", #異步數據驗證插件 "babel-helper-vue-jsx-merge-props": "^2.0.0", #jsx和vue合並插件 "deepmerge": "^1.2.0", #對象深度合並插件 "normalize-wheel": "^1.0.1", #瀏覽器滾輪兼容插件 "resize-observer-polyfill": "^1.5.0", #監聽元素變化插件 "throttle-debounce": "^1.0.1" #節流去抖插件 }, "peerDependencies": { #宿主依賴包 "vue": "^2.5.2" }, "devDependencies": { "algoliasearch": "^3.24.5", #實時托管全文搜索引擎 "babel-cli": "^6.14.0", #babel系列 "babel-core": "^6.14.0", "babel-loader": "^7.1.2", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-module-resolver": "^2.2.0", "babel-plugin-syntax-jsx": "^6.8.0", "babel-plugin-transform-vue-jsx": "^3.3.0", "babel-preset-es2015": "^6.14.0", "chai": "^3.5.0", #斷言插件 "cheerio": "^0.18.0", #服務器高效操作DOM插件 "chokidar": "^1.7.0", #node檢查文件變化插件 "copy-webpack-plugin": "^4.1.1", #webpack拷貝文件插件 "coveralls": "^2.11.14", #測試覆蓋率插件 "cp-cli": "^1.0.2", #node中使用UNIX的cp命令插件 "cross-env": "^3.1.3", #跨平台地設置及使用環境變量 "css-loader": "^0.28.7", #css加載插件 "es6-promise": "^4.0.5", #promise語法插件 "eslint": "4.14.0", #eslint系列 "eslint-config-elemefe": "0.1.1", "eslint-loader": "^1.9.0", "eslint-plugin-html": "^4.0.1", "eslint-plugin-json": "^1.2.0", "extract-text-webpack-plugin": "^3.0.1", #webpack中提取css樣式成單獨文件的插件 "file-loader": "^1.1.5", #文件加載插件 "file-save": "^0.2.0", #文件保存插件 "gh-pages": "^0.11.0", #自動發布到gh-pages "gulp": "^3.9.1", #gulp打包系列 "gulp-autoprefixer": "^4.0.0", "gulp-cssmin": "^0.1.7", "gulp-postcss": "^6.1.1", "gulp-sass": "^3.1.0", "highlight.js": "^9.3.0", #高亮插件 "html-loader": "^0.5.1", #html加載器 "html-webpack-plugin": "^2.30.1", #webpack的HTML生成插件 "inject-loader": "^3.0.1", "isparta-loader": "^2.0.0", "json-loader": "^0.5.7", #json加載器 "json-templater": "^1.0.4", #json模板語法插件 "karma": "^1.3.0", #karma測試框架系列 "karma-chrome-launcher": "^2.2.0", "karma-coverage": "^1.1.1", "karma-mocha": "^1.2.0", "karma-sinon-chai": "^1.2.4", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.26", "karma-webpack": "^3.0.0", "lolex": "^1.5.1", #時間模擬插件 "markdown-it": "^6.1.1", #markdown解析器 "markdown-it-anchor": "^2.5.0", "markdown-it-container": "^2.0.0", "mocha": "^3.1.1", #mocha測試庫 "node-sass": "^4.5.3", #sass語法必備插件 "perspective.js": "^1.0.0", #透視插件 "postcss": "^5.1.2", #postcss系列 "postcss-loader": "0.11.1", "postcss-salad": "^1.0.8", "progress-bar-webpack-plugin": "^1.11.0", "rimraf": "^2.5.4", #node深度刪除模塊 "sass-loader": "^6.0.6", #sass加載器 "sinon": "^1.17.6", #sinon測試插件 "sinon-chai": "^2.8.0", "style-loader": "^0.19.0", #樣式加載器 "transliteration": "^1.1.11", "uppercamelcase": "^1.1.0", #駝峰命名插件 "url-loader": "^0.6.2", #url加載器 "vue": "^2.5.2", #vue系列 "vue-loader": "^13.3.0", "vue-markdown-loader": "1", "vue-router": "2.7.0", "vue-template-compiler": "^2.5.2", "vue-template-es2015-compiler": "^1.6.0", "webpack": "^3.7.1", #webpack系列 "