源码学习目录

1. 前言

1.1 环境

  1. 操作系统: macOS 11.5.2
  2. 浏览器: Chrome 94.0.4606.81

  3. element-ui 2.15.7

    1.2 阅读该文章可以get以下知识点

  4. element-ui 如何初始化新的组件

    2. 开始

    2.1 如何创建新组件

    1. make new xxx

    运行上面的命令会创建响应的资源文件

  5. packages/xxx

  6. test/unit/specs/xxx.spec.js
  7. types/element-ui.d.ts

    2.2 Makefile

    ```makefile .PHONY: dist test default: help

install: npm install

new:

这里会执行 build/bin/new.js下面的文件

  1. node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))

help: @echo “ \033[35mmake\033[0m \033[1m命令使用说明\033[0m” @echo “ \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t—- 安装依赖” @echo “ \033[35mmake new [中文名]\033[0m\t—- 创建新组件 package. 例如 ‘make new button 按钮’” @echo “ \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t—- 开发模式” @echo “ \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t—- 编译项目，生成目标文件” @echo “ \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t—- 部署 demo” @echo “ \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t—- 发布到 npm 上” @echo “ \033[35mmake new-lang \033[0m\t\033[0m\t\033[0m\t—- 为网站添加新语言. 例如 ‘make new-lang fr’”

  1. 挺有意思的写法,直接通过make new再去执行脚本<br />$(filter-out $@,$(MAKECMDGOALS))这段代码是将参数传入到new.js脚本中
  3. 1. $@
  4.    1. 会返回自身,例如 这里的new:,会返回new
  5. 2. $(MAKECMDGOALS)  
  6.    1. 返回所有的参数,例如 make new xxx,会返回 new xx
  7. 3. filter-out反过滤函数
  8.    1. 有两个参数,第一个参数是匹配的字符串,第二个参数是需要处理的字符串
  9.    2. 过滤掉所有匹配的字符串,保留不匹配的,例如; make new xxx, 返回xxx,过滤掉了new
  10. <a name="ezz5E"></a>
  11. ## 2.3 new.js
  12. ```javascript
  13. 'use strict';
  15. console.log();
  16. process.on('exit', () => {
  17.   console.log();
  18. });
  20. // 默认0和1是node环境变量和当前运行文件,第三个就是组件名
  21. if (!process.argv[2]) {
  22.   console.error('[组件名]必填 - Please enter new component name');
  23.   process.exit(1);
  24. }
  26. const path = require('path');
  27. const fs = require('fs');
  28. // 文件存储
  29. const fileSave = require('file-save');
  30. // 驼峰转化
  31. const uppercamelcase = require('uppercamelcase');
  32. // 组件吗
  33. const componentname = process.argv[2];
  34. // 如果有中文名,传入第四个参数,没有的话,直接去组件吗
  35. const chineseName = process.argv[3] || componentname;
  36. // 转化成大驼峰
  37. const ComponentName = uppercamelcase(componentname);
  38. // 获取packages的路径
  39. const PackagePath = path.resolve(__dirname, '../../packages', componentname);
  40. // 文件名和模板语法
  41. const Files = [
  42.   {
  43.     filename: 'index.js',
  44.     content: `import ${ComponentName} from './src/main';
  46. /* istanbul ignore next */
  47. ${ComponentName}.install = function(Vue) {
  48.   Vue.component(${ComponentName}.name, ${ComponentName});
  49. };
  51. export default ${ComponentName};`
  52.   },
  53.   {
  54.     filename: 'src/main.vue',
  55.     content: `<template>
  56.   <div class="el-${componentname}"></div>
  57. </template>
  59. <script>
  60. export default {
  61.   name: 'El${ComponentName}'
  62. };
  63. </script>`
  64.   },
  65.   {
  66.     filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),
  67.     content: `## ${ComponentName} ${chineseName}`
  68.   },
  69.   {
  70.     filename: path.join('../../examples/docs/en-US', `${componentname}.md`),
  71.     content: `## ${ComponentName}`
  72.   },
  73.   {
  74.     filename: path.join('../../examples/docs/es', `${componentname}.md`),
  75.     content: `## ${ComponentName}`
  76.   },
  77.   {
  78.     filename: path.join('../../examples/docs/fr-FR', `${componentname}.md`),
  79.     content: `## ${ComponentName}`
  80.   },
  81.   {
  82.     filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
  83.     content: `import { createTest, destroyVM } from '../util';
  84. import ${ComponentName} from 'packages/${componentname}';
  86. describe('${ComponentName}', () => {
  87.   let vm;
  88.   afterEach(() => {
  89.     destroyVM(vm);
  90.   });
  92.   it('create', () => {
  93.     vm = createTest(${ComponentName}, true);
  94.     expect(vm.$el).to.exist;
  95.   });
  96. });
  97. `
  98.   },
  99.   {
  100.     filename: path.join('../../packages/theme-chalk/src', `${componentname}.scss`),
  101.     content: `@import "mixins/mixins";
  102. @import "common/var";
  104. @include b(${componentname}) {
  105. }`
  106.   },
  107.   {
  108.     filename: path.join('../../types', `${componentname}.d.ts`),
  109.     content: `import { ElementUIComponent } from './component'
  111. /** ${ComponentName} Component */
  112. export declare class El${ComponentName} extends ElementUIComponent {
  113. }`
  114.   }
  115. ];
  117. // 添加到 components.json
  118. const componentsFile = require('../../components.json');
  119. if (componentsFile[componentname]) {
  120.   console.error(`${componentname} 已存在.`);
  121.   process.exit(1);
  122. }
  123. componentsFile[componentname] = `./packages/${componentname}/index.js`;
  124. // 存储新的json
  125. fileSave(path.join(__dirname, '../../components.json'))
  126.   .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
  127.   .end('\n');
  129. // 添加到 index.scss
  130. const sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');
  131. const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;
  132. fileSave(sassPath)
  133.   .write(sassImportText, 'utf8')
  134.   .end('\n');
  136. // 添加到 element-ui.d.ts
  137. const elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');
  139. let elementTsText = `${fs.readFileSync(elementTsPath)}
  140. /** ${ComponentName} Component */
  141. export class ${ComponentName} extends El${ComponentName} {}`;
  143. const index = elementTsText.indexOf('export') - 1;
  144. const importString = `import { El${ComponentName} } from './${componentname}'`;
  146. elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);
  148. fileSave(elementTsPath)
  149.   .write(elementTsText, 'utf8')
  150.   .end('\n');
  152. // 创建 package
  153. Files.forEach(file => {
  154.   fileSave(path.join(PackagePath, file.filename))
  155.     .write(file.content, 'utf8')
  156.     .end('\n');
  157. });
  159. // 添加到 nav.config.json
  160. const navConfigFile = require('../../examples/nav.config.json');
  162. Object.keys(navConfigFile).forEach(lang => {
  163.   let groups = navConfigFile[lang][4].groups;
  164.   groups[groups.length - 1].list.push({
  165.     path: `/${componentname}`,
  166.     title: lang === 'zh-CN' && componentname !== chineseName
  167.       ? `${ComponentName} ${chineseName}`
  168.       : ComponentName
  169.   });
  170. });
  172. fileSave(path.join(__dirname, '../../examples/nav.config.json'))
  173.   .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')
  174.   .end('\n');
  176. console.log('DONE!');

3. 总结

  1. 熟悉了一些Makefile的语法
  2. 通过Makefile的方式,去执行一些脚本,代码很简洁,如 make new, make help,不需要去写package.json scripts,减少了script的脚本,但是也有一定的理解成本,有些前端同学不懂Makefile,windows环境需要gcc环境

  3. 组件初始化主要是通过文件读写来处理,没什么难度的东西

    4. 参考文档

  4. https://juejin.cn/post/7031331765482422280

  5. https://www.npmjs.com/package/element-ui