Elementソースシリーズ——初認識フレームワーク
24385 ワード
Elementソースシリーズ——初認識フレームワーク Elementソースシリーズ——初認識フレームワーク 序言 ディレクトリ構造 package.json 1.基礎情報 2.依存関係 3.Scriptsオブジェクト まとめ
序文
今、先端の技术はますます雑になって、ますます细くなって、そのため毎回ドキュメントを読むたびに错覚があって、自分があまり悪くないことです.本当にプロジェクトをする时はまた前のステップを缲り返します.
前にJavaを書いたとき、ソースコードを習慣的に見て、見終わったら知識をもっとしっかり身につけて、茅塞顿が開いた感じが素晴らしいです.前端を作ったこの時間を思い出すと、確かに自分がイライラしていた.
私がelementを学習目標として選んだ目的は2つあります.
1.elementはVueのUIフレームワークで、私のCSS、JavaScript、Vueの知識を混ぜ合わせることができます.
2.以前のプロジェクトで実現した先端技術アーキテクチャはあまりよくなく、ずっと自分の視野が低いと思っていました.学習を通じて既存のアーキテクチャを再構築することができ、私たちのチームの兄弟がもっと快適に仕事をすることができることを望んでいます.
文章は更新し続けます.elementチームに感謝します.皆さんの読書にも感謝します.
ディレクトリ構造
個人的には、異なるレベルのプログラム猿にとって、プロジェクトのファイル構造を読むときに得られる情報は絶対に異なると思います.まず、ディレクトリ構造を読むのは、プロジェクトを簡単に理解する最も速い方法です.
プロジェクトの良いディレクトリ構造は絶対に欠かせません.次にelementのソース版とリリース版のディレクトリ構造を見てみましょう.
ソース開発パッケージを見てから、パッケージ化されたプロジェクト、つまり普段使っているelement-uiディレクトリ構造を見てみましょう.このような利点は、ソースパケットの構築ツールが何をしているのかを大体見ることができることです.
package.json
ソースコードを読む前に、package.jsonを1回渡す必要があります.package.jsonはプロジェクト名、バージョン番号、依存するnpmパッケージ、プロジェクトの異なるライフサイクルで構築された作業の構成などを説明しています.読み終わったら、以前のディレクトリ構造学習でぼやけていたファイルが徐々に正体を漏らしています.
1.基礎情報
package.jsonの基礎情報から、普段npmでインストールしているエントリファイルはどれなのか、unpkg導入時にいったい誰が導入しているのかを見ることができます.
2.依存関係
依存関係は私たちに大局的に少し把握させることができて、少なくとも私たちの心の中に点数を持って、大体どんな技術を使ったかを知っていて、さもなくば各種のrequireを見てからかえってぼんやりしていて、学習の進度と構想に影響します.
依存関係にはもう一つ重要なバージョン情報があります.特にwebpackなどの構築ツールのバージョンは、特に注意してください.
3.Scriptsオブジェクト
プロジェクト全体の依存関係を明確にした後、package.jsonにおけるscriptsオブジェクトは次の学習が必要な部分である.
ここでscriptsオブジェクトのkeyはライフサイクル中のイベントであり、valueは実行するshellコマンドである.
次に、コマンドをライフサイクルに分類して説明します.
1.インストール依存
ステップ1では、yranまたはnpmインストール項目依存を使用して、yranがインストールされていない場合にnpmをインストールします.
2.文法検査及びkarmaテスト
第2歩、文法検査とkarmaテスト環境を構築する.ここではこの部分について詳しく紹介する.
3.開発環境の構築
第三歩、開発環境を構築する.開発環境は複雑で、私も単独で1篇の文章を提出して紹介する.
4.配布の導入
最後に、導入発表も単独で1つの記事を紹介します.
まとめ
初歩の枠组みは大体终わって、Scriptの命令について后の文章も绍介します.个人的には、ソースを勉强するには、最初から他人のことを理解するのがいいと思います.そうすれば、开発者と同じ角度に立って问题を考えることができます.
読んでくれてありがとう!
最后に再びelementチームがみんなに持ってきた良いフレームワークに感谢します!!
序文
今、先端の技术はますます雑になって、ますます细くなって、そのため毎回ドキュメントを読むたびに错覚があって、自分があまり悪くないことです.本当にプロジェクトをする时はまた前のステップを缲り返します.
前にJavaを書いたとき、ソースコードを習慣的に見て、見終わったら知識をもっとしっかり身につけて、茅塞顿が開いた感じが素晴らしいです.前端を作ったこの時間を思い出すと、確かに自分がイライラしていた.
私がelementを学習目標として選んだ目的は2つあります.
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を1回渡す必要があります.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": "[email protected]: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
"webpack-dev-server": "^2.9.1",
"webpack-node-externals": "^1.6.0"
}
}3.Scriptsオブジェクト
プロジェクト全体の依存関係を明確にした後、package.jsonにおけるscriptsオブジェクトは次の学習が必要な部分である.
package.json , scripts .script , 、 、 、 . ここでscriptsオブジェクトのkeyはライフサイクル中のイベントであり、valueは実行するshellコマンドである.
次に、コマンドをライフサイクルに分類して説明します.
1.インストール依存
ステップ1では、yranまたはnpmインストール項目依存を使用して、yranがインストールされていない場合にnpmをインストールします.
"bootstrap": "yarn || npm i"2.文法検査及びkarmaテスト
第2歩、文法検査とkarmaテスト環境を構築する.ここではこの部分について詳しく紹介する.
#
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"
# CI ,
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run"
#
"test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"3.開発環境の構築
第三歩、開発環境を構築する.開発環境は複雑で、私も単独で1篇の文章を提出して紹介する.
# icon , , i18n ,
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.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"4.配布の導入
最後に、導入発表も単独で1つの記事を紹介します.
# SCSS CSS
"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"
# umd
"build:umd": "node build/bin/build-locale.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"
#
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"
# github
"deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && rimraf examples/element-ui"
#
"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"
#
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh"まとめ
初歩の枠组みは大体终わって、Scriptの命令について后の文章も绍介します.个人的には、ソースを勉强するには、最初から他人のことを理解するのがいいと思います.そうすれば、开発者と同じ角度に立って问题を考えることができます.
読んでくれてありがとう!
最后に再びelementチームがみんなに持ってきた良いフレームワークに感谢します!!