阅读element-ui源码（1）怎么找到样式与组件入口文件

怎么阅读？

首先，找到入口文件
找到样式文件与组件文件
有没有一些复用的小组件，由这些小组件组成的大组件有哪些

入口文件

项目启动文件：

"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","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"}

从文件中可以看出启动文件有以下步骤：

node build/bin/iconInit.js 读取packages/theme-chalk/src/icon.scss文件，获取icon样式
node build/bin/build-entry.js 读取components.json 文件，这个文件记录了所有组件的入口文件，并以json格式保存，并定义了三个模板数组：
var includeComponentTemplate = [];
var installTemplate = [];
var listTemplate = [];
之后遍历components.json文件，将所有组件都通过 json-templater/string 插件，渲染为 import {{name}} from’…/packages/{{package}}/index.js’; 保存到 includeComponentTemplate 数组；
将key中包含[‘Loading’, ‘MessageBox’, ‘Notification’, ‘Message’, ‘InfiniteScroll’]中的任意一个的排除外，其余的 {{name}}都保存到 installTemplate 数组；
然后将不是Loading的组件名都保存到listTemplate 数组；
之后在通过join(操作系统的行尾符的常量)将各数组拼接，渲染到MAIN_TEMPLATE,这个模板就是组件注册的模板：
var MAIN_TEMPLATE = `/* Automatically generated by ‘./build/bin/build-entry.js’ */
```
{{include}}
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';const components = [
{{install}},CollapseTransition
];const install = function(Vue, opts = {}) {locale.use(opts.locale);locale.i18n(opts.i18n);components.forEach(component => {Vue.component(component.name, component);});Vue.use(InfiniteScroll);Vue.use(Loading.directive);Vue.prototype.$ELEMENT = {size: opts.size || '',zIndex: opts.zIndex || 2000};Vue.prototype.$loading = Loading.service;Vue.prototype.$msgbox = MessageBox;Vue.prototype.$alert = MessageBox.alert;Vue.prototype.$confirm = MessageBox.confirm;Vue.prototype.$prompt = MessageBox.prompt;Vue.prototype.$notify = Notification;Vue.prototype.$message = Message;};/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}export default {version: '{{version}}',locale: locale.use,i18n: locale.i18n,install,CollapseTransition,Loading,
{{list}}
};
`;
```
渲染组件注册模板的方法：
var template = render(MAIN_TEMPLATE, {
include: includeComponentTemplate.join(endOfLine),
install: installTemplate.join(’,’ + endOfLine),
version: process.env.VERSION || require(’…/…/package.json’).version,
list: listTemplate.join(’,’ + endOfLine)
});
最后呢，将渲染的内容写到 src/index.js 文件。

webpack入口文件

webpack.demo.js：项目根据是isProd还是isPlay环境进行打包，打包的入口是 ./examples/entry.js还是./examples/play.js，由于 const isPlay = !!process.env.PLAY_ENV; ，所以，是 examples/entry.js。出口文件为： path.resolve(process.cwd(), ‘./examples/element-ui/’) ，当前工作目录下下的examples/element-ui目录下。

项目入口文件examples/entry.js

这个文件相当与普通vue文件的main.js，

有路由：

import VueRouter from 'vue-router';
import routes from './route.config';

有vue实例与入口模板：

import Vue from 'vue';
import entry from './app';

有公共组件：

import Element from 'main/index.js';
import demoBlock from './components/demo-block';
import MainFooter from './components/footer';
import MainHeader from './components/header';
import SideNav from './components/side-nav';
import FooterNav from './components/footer-nav';
import title from './i18n/title';Vue.use(Element);
Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);
Vue.component('main-footer', MainFooter);
Vue.component('main-header', MainHeader);
Vue.component('side-nav', SideNav);
Vue.component('footer-nav', FooterNav);

有公共样式：

import 'packages/theme-chalk/src/index.scss';
import './demo-styles/index.scss'; // 组件的基本样式，其中都是@import
import './assets/styles/common.css';
import './assets/styles/fonts/style.css';
import icon from './icon.json';

最后，将所有元素与实例都打到了#appDOM节点上：

new Vue({ // eslint-disable-line...entry,router
}).$mount('#app');

项目是怎么找到组件并渲染的？

通过模板渲染官方文档

在webpack.demo.js中，得知从哪找的首页模板：

new HtmlWebpackPlugin({template: './examples/index.tpl',filename: './index.html',favicon: './examples/favicon.ico'}),

那么，组件的模板是从哪儿找的呢？其实webpack的入口文件已经告诉了我们：

"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"

就是build/bin/template.js 文件。

const templates = path.resolve(process.cwd(), './examples/pages/template');
const chokidar = require('chokidar');
let watcher = chokidar.watch([templates]);watcher.on('ready', function() {watcher.on('change', function() {exec('npm run i18n');});
});

使用了chokidar 库来监控 examples/pages/template 下的文件，一旦发现下面的文件发生变化，就执行npm run i18n命令，而在package.json中，可以看到：

"i18n": "node build/bin/i18n.js"

从build.bin.i18n.js，得知：

读取的是 examples/i18n/page.json ，文件描述的是有哪些功能目录；然后判断examples/pages下有没有这些目录文件，没有就创建，使用examples/pages/template/下的模板文件渲染，输出到examples/pages目录下。

通过路由

通过route.config.js可以看到nav.config.json文件，这个记录着element项目文档的目录。

可以看到文档的主要几个执行逻辑：

LOAD_MAP：创建了一个闭包可以读取响应语言的组件（组件要运行后才能产生）
load：return LOAD_MAP
LOAD_DOCS_MAP：读取/docs下的各语言文档
loadDocs：return LOAD_DOCS_MAP
registerRoute: function读取nav.config.json，并生成router对象返回
执行registerRoute
generateMiscRoutes：function生成路由数组
执行generateMiscRoutes
搞了一个v-model模板
...

这个文件主要就是这些功能，而在着其中，使用组件的重要逻辑就是registerRoute

阅读element-ui源码（1）怎么找到样式与组件入口文件相关推荐

从 Element UI 源码的构建流程看前端 UI 库设计
引言由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue.而业界已经有比较成熟的一些UI库了,比如ElementUI.AntDesign.Vant等. 结合框架Vue,我们选择在Ele ...
rust墙壁升级点什么_分享：如何在阅读Rust项目源码中学习
今天做了一个Substrate相关的小分享,公开出来. 因为我平时也比较忙,昨天才选定了本次分享的主题,准备比较仓促,细节可能不是很充足,但分享的目的也是给大家提供一个学习的思路,更多的细节大家可以在 ...
webuploader 怎么在react中_另辟蹊径搭建阅读React源码调试环境支持所有React版本细分文件断点调试...
引言(为什么写这篇文章) 若要高效阅读和理解React源码,搭建调试环境是必不可少的一步.而常规方法:使用react.development.js和react-dom.development.js调试 ...
golangsha1解码_如何阅读Golang的源码？
Go 的源码在安装包的 src/ 目录下.怎么看它的源码呢?直接看吧!没人教的情况下,只能自己撸了.当然,这种内容一般也不会有人教. 怎么撸? Go 源码中,应该可分为与语言息息相关的部分,和官方提供 ...
阅读Skeleton.css源码，改善睡眠质量（尽管它只有419行代码）
theme: smartblue 本文介绍点赞就等于学会了! 如果本文对您有帮助,建议点赞收藏(点赞就等于学会了) Skeleton 源码一共只有 419 行(加上注释和换行),非常适合用来学习. ...
Android ---- Ijkplayer阅读native层源码之IjkMediaPlayer_prepareAsync（五）
整章目录:Android------- IjkPlayer 源码学习目录本篇会有很多源代码,请注意阅读每行代码上面的注释. 本篇介绍的主要内容为上图红框圈起部分: IjkMediaPlayer_pr ...
以太坊源码阅读5——POW源码分析
以太坊源码阅读5--POW源码分析介绍 POW,proof of work,即工作量证明,是著名公bitcoin所采用的共识算法.简单来说,pow就是一个证明,由矿工使用算力进行计算(挖矿),竞争记 ...
Ubuntu 安裝 GNU Global(gtags) 阅读Linux内核源码
CSDN GitHub Ubuntu 安裝 GNU Global(gtags) 阅读Linux内核源码 AderXCoding/system/tools/global 本作品采用知识共享署名-非商业性 ...
知识付费阅读小程序源码,前端+后台+代理+分销
介绍: 知识付费阅读小程序源码,前端+后台源码,带有代理,分销,课程资源更新等等功能. 没有安装教程,微擎的就不多说了. 网盘下载地址: http://kekewangLuo.net/R9cbFxmn ...

阅读element-ui源码（1）怎么找到样式与组件入口文件

入口文件

阅读element-ui源码（1）怎么找到样式与组件入口文件相关推荐

最新文章

热门文章