大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。
本文是为了学习组件库搭建思路而衍生的一篇文章，最近在思考搭建项目业务组件库，发现公司封装的命令也是基于vue2的，因此开始了学习ElementUI源码学习之路。
调试环境准备
在package.json的scripts中配置
"dev:sourcemap": "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 --sourcemap",
配置sourcemap就可以开启源码调试了，在项目中打好断点
1675863128642.png
入口文件 examples\entry.js
找到build\webpack.demo.js发现就是一些基础的webpack配置，查看webpack配置文件，发现入口为examples\entry.js
这正是一个vue项目，因此npm run dev就是启动一个vue项目，而上面build生成的那些文件，是运行时所需的一些配置
npm run dev首页内容
1675859002151.png
examples\components\header.vue页面导航部分代码，最终生成的路径：/zh-CN/component/installation
<li class="nav-item">
<router-link
active-class="active"
:to="`/${ lang }/component`">{{ langConfig.components }}
</router-link>
</li>
router-link的内容应该在路由配置表里面可以找到，从examples\entry.js可以找到路由配置相关信息
import VueRouter from 'vue-router';
import routes from './route.config';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
base: __dirname,
routes
});
router配置来自examples\route.config.js
//这边import使用到的内容就是上节我们说的从npm run build中打包过来的内容
import navConfig from './nav.config';
const LOAD_MAP = {
'zh-CN': name => {
return r => require.ensure([], () =>
r(require(`./pages/zh-CN/${name}.vue`)),
'zh-CN');
},
'en-US': name => {
return r => require.ensure([], () =>
r(require(`./pages/en-US/${name}.vue`)),
'en-US');
},
};
const LOAD_DOCS_MAP = {
"zh-CN": (path) => {
return (r) =>
require.ensure([], () => r(require(`./docs/zh-CN${path}.md`)), "zh-CN")
},
"en-US": (path) => {
return (r) =>
require.ensure([], () => r(require(`./docs/en-US${path}.md`)), "en-US")
},
}
//组件懒加载-这边加载的是语言包下的导航类的组件
const load = function(lang, path) {
return LOAD_MAP[lang](path);
};
//加载文档组件-这边加载的才是真正的组件
const loadDocs = function(lang, path) {
return LOAD_DOCS_MAP[lang](path)
}
//注册路由
const registerRoute = (navConfig) => {
let route = [];
Object.keys(navConfig).forEach((lang, index) => {
let navs = navConfig[lang];
route.push({
path: `/${ lang }/component`,
redirect: `/${ lang }/component/installation`,
component: load(lang, 'component'),
children: []
});
navs.forEach(nav => {
if (nav.href) return;
if (nav.groups) {
nav.groups.forEach(group => {
group.list.forEach(nav => {
addRoute(nav, lang, index);
});
});
} else if (nav.children) {
nav.children.forEach(nav => {
addRoute(nav, lang, index);
});
} else {
addRoute(nav, lang, index);
}
});
});
function addRoute(page, lang, index) {
//判断是否是changelog,不是使用loadDocs加载组件
const component = page.path === '/changelog'
? load(lang, 'changelog')
: loadDocs(lang, page.path);
let child = {
path: page.path.slice(1),
meta: {
title: page.title || page.name,
description: page.description,
lang
},
name: 'component-' + lang + (page.title || page.name),
component: component.default || component
};
route[index].children.push(child);
}
return route;
};
let route = registerRoute(navConfig);
export default route;
load函数，这个函数主要是让组件懒加载，LOAD_MAP[lang]返回的是一个函数，即
(name) => {
return (r) =>
require.ensure([], () => r(require(`./pages/zh-CN/${name}.vue`)), "zh-CN")
}
调用LOAD_MAP[lang]这个函数，返回内容即
(r) =>require.ensure([], () => r(require(`./pages/zh-CN/${name}.vue`)), "zh-CN")
registerRoute函数会根据examples\nav.config.json这个json里面配置的内容为各种语言的映射，包括导航和菜单组织信息，将导航和菜单信息都提前配置好在这个文件中，后续组件导航就根据这个文件来生成的。
在addRoute函数中，最终组件使用的是load和loadDocs来导入组件的，这两个的区别就是，load加载的组件是导航类的，这个可以在examples\pages\zh-CN中进行验证
1675862334888.png
loadDocs加载的组件是examples\docs\zh-CN的
1675862386094.png
为什么这边加载的组件是md文件呢？
因为在build\webpack.demo.js中有这么一段配置，这个是用来解析md文件的loader，先将md文件解析成vue文件，再使用vue-loader解析vue文件，再进行展示页面
{
test: /\.md$/,
use: [
{
loader: "vue-loader",
options: {
compilerOptions: {
preserveWhitespace: false,
},
},
},
{
loader: path.resolve(__dirname, "./md-loader/index.js"),
},
],
},
总结：
看一点头绪都没有的代码不妨先看降级的代码，比如我一开始是想学习element-plus源码的，但是新的结构让我觉得陌生，学习摸索大概有一两个星期，也就大概看了个架子，内心其实也是比较受打击的。
就像我之前说的，我不是一个学习技术特别厉害的人，因此学习跨度更大的代码让我提不起兴趣，想要逃避。但是我当我换成看element源码后完全不会有这样的感觉，即使有不太懂的，也可以在网上找到答案，解决我的疑惑。
网友评论