目錄解析
element
├── github // 存放了elementui貢獻指南，issue 和 PR模板
├── build // 存放打包相關的配置文件
├── examples // 組件相關示例demo
├── packages // 組件源碼
├── src // 存放入口文件和一些工具輔助函數(shù)
├── test // 單元測試相關
├── types // 類型聲明文件
├── .travis.yml // 持續(xù)集成(CI)的配置文件
├── CHANGELOG.en-US.md
├── CHANGELOG.es.md
├── CHANGELOG.fr-FR.md
├── CHANGELOG.zh-CN.md // 更新日志 總共4種語言
├── components.json // 標明了組件的文件路徑
├── element_logo.svg
├── FAQ.md // 開發(fā)者問答
├── LICENSE // 開源許可證 elementui是MIT協(xié)議
├── Makefile Makefile // 是一個適用于 C/C++ 的工具，在擁有 make 環(huán)境的目錄下，
// 如果存在一個 Makefile 文件。 那么輸入 make 命令將會執(zhí)行 Makefile 文件中的某個目標命令。
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock從package.json聊起
{
"name": "element-ui",
"version": "2.14.1",
"description": "A Component Library for Vue.js.",
"main": "lib/element-ui.common.js", // 入口文件
"files": [ // 指定npm publish發(fā)包時需要包含的文件/目錄。
"lib",
"src",
"packages",
"types"
],
"typings": "types/index.d.ts", // TypeScript入口文件。
"scripts": { // 腳本命令
"bootstrap": "yarn || npm i",
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
//
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:umd": "node build/bin/build-locale.js",
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
"deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
"dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
"dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
"i18n": "node build/bin/i18n.js",
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
},
"faas": [
{
"domain": "element",
"public": "temp_web/element"
},
{
"domain": "element-theme",
"public": "examples/element-ui",
"build": [
"yarn",
"npm run deploy:build"
]
}
],
"repository": { // git倉庫地址
"type": "git",
"url": "git@github.com:ElemeFE/element.git"
},
"homepage": "http://element.eleme.io", // 項目的線上地址
"keywords": [
"eleme",
"vue",
"components"
],
"license": "MIT", // 開源許可證
"bugs": {
"url": "https://github.com/ElemeFE/element/issues"
},
"unpkg": "lib/index.js", // cdn地址文件入口
"style": "lib/theme-chalk/index.css", // 聲明樣式入口文件
"dependencies": {
},
"peerDependencies": {
"vue": "^2.5.17"
},
"devDependencies": {
// ...
}
}
特殊命令解析
bootstrap 引導安裝包
引導安裝包
build:file 生成入口文件
- node build/bin/iconInit.js
用于生成../../examples/icon.json,解析icon.scss, 把所有的icon的名字放在icon.json里面,遍歷名字顯示icon(不用每次添加了icon就要修改example)
- node?build/bin/build-entry.js
主要用于生成 /src/index.js入口文件.
- node?build/bin/i18n.js
根據(jù)?examples/i18n/page.json?和模版，生成不同語言的?demo
- node?build/bin/version.js
根據(jù)package.json中的version和歷史版本,生成examples/versions.json，對應就是完整的版本列表
build:theme 處理樣式
- node build/bin/gen-cssfile
這一步是根據(jù)components.json，生成package/theme-chalk/index.scss文件，把所有組件的樣式都導入到index.scss。相當于自動導入所有組件的樣式文件到index.scss中 再也不用手動操作啦
- gulp?build?--gulpfile?packages/theme-chalk/gulpfile.js
通過gulp將theme-chalk下的所有scss文件編譯為css
- cp-cli?packages/theme-chalk/lib?lib/theme-chalk
cp-cli是一個跨平臺的copy工具
將?packages/theme-chalk/lib 復制到?lib/theme-chalk
build:utils 編譯工具
cross-env?BABEL_ENV=utils?babel?src?--out-dir?lib?--ignore?src/index.js
把src目錄下的除了index.js入口文件外的其他文件通過babel轉譯，然后移動到lib文件夾下。
build:umd 生成umd模塊的語言包
node?build/bin/build-locale.js
生成umd模塊的語言包。
clean 清除打包文件
rimraf?lib?&&?rimraf?packages/*/lib?&&?rimraf?test/**/coverage
刪除打包生成的文件
deploy:build
npm?run?build:file 生成入口文件
cross-env?NODE_ENV=production?webpack?--config?build/webpack.demo.js? 處理markdown文件
?echo?element.eleme.io>>examples/element-ui/CNAME : 向CNAME中寫入一些東西
deploy:extension
cross-env?NODE_ENV=production?webpack?--config?build/webpack.extension.js
dev:extension
rimraf?examples/extension/dist
cross-env?NODE_ENV=development?webpack?--watch?--config?build/webpack.extension.js
dev 開啟開發(fā)模式
開啟開發(fā)模式，在啟動后可以在瀏覽器打開本地的elementUI的實例官網
npm?run?bootstrap 引導安裝包
npm?run?build:file 生成入口文件
cross-env?NODE_ENV=development?webpack-dev-server?--config?build/webpack.demo.js? 處理markdown
& node?build/bin/template.js 監(jiān)聽examples/pages/template改變時執(zhí)行npm run i18n, & 表示與前幾個腳本是并發(fā)執(zhí)行的.
dev:play 開啟某個組件的開發(fā)模式
開啟某個組件的開發(fā)模式，在這里可以單獨開發(fā)某個組件，目錄examples/play/index.vue
與?dev?相比少了安裝的步驟，以及后面的?template.js的構建，多了個?PLAY_ENV=true, 在webpack.demo.js中會處理
npm?run?build:file 生成入口文件
cross-env?NODE_ENV=development?PLAY_ENV=true?webpack-dev-server?--config?build/webpack.demo.js
dist 打包生成最終的代碼
npm?run?clean 清除打包文件
npm?run?build:file?生成入口文件
npm?run?lint? 格式化
webpack?--config?build/webpack.conf.js?生成umd格式的js文件（index.js）
webpack?--config?build/webpack.common.js? 生成commonjs格式的js文件
webpack?--config?build/webpack.component.js? 以components.json為入口，將每一個組件打包生成一個文件，用于按需加載
npm?run?build:utils
npm?run?build:umd?
npm?run?build:theme
i18n 多語言處理
node?build/bin/i18n.js 國際化處理
lint 格式化
eslint?src/**/*?test/**/*?packages/**/*?build/**/*?--quiet
不必多說 格式化
pub 發(fā)布
npm?run?bootstrap?引導安裝包
sh?build/git-release.sh?進行dev分支git沖突檢測
sh?build/release.sh?發(fā)布
node?build/bin/gen-indices.js?
sh?build/deploy-faas.sh
test 測試用例
執(zhí)行測試用例
npm?run?lint?
npm?run?build:theme?
cross-env?CI_ENV=/dev/?BABEL_ENV=test?karma?start?test/unit/karma.conf.js?--single-run
test:watch
執(zhí)行測試用例 代碼改變自動執(zhí)行
npm?run?build:theme?
cross-env?BABEL_ENV=test?karma?start?test/unit/karma.conf.js
特殊文件夾說明
components.json
里面記錄著所有組件的文件位置,根據(jù)這個文件來自動化生成一些配置文件(比如注冊組件 樣式文件入口生成)
packages
所有的組件都在這里了
packages/theme-chalk
這里面存放的就是所有組件相關的樣式. index.scss 用于全局引入,其他是每個組件的樣式(按需引入時會用到)
src
src/index.js 把所有的組件統(tǒng)一導出. (這個index.js 是通過node?build/bin/build-entry.js生成的),通過腳本命令去生成,不用每次新增一個組件就修改一下.
其余時一些公共方法啦
examples
存放了組件示例. 組件示例是通過markdown來編寫的,最后通過build/md-loader下的腳本來生成html
element是如何生成文檔的?這篇文章主要講了怎么實現(xiàn),值得一看!!
文章來源：http://www.zghlxwxcb.cn/news/detail-682530.html
參考鏈接
掘金上寫的非常好的文章文章來源地址http://www.zghlxwxcb.cn/news/detail-682530.html
到了這里，關于element-ui分析的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
