element如何初始化組件功能詳解

更新時間：2022年12月21日 08:36:17 作者：codeniu

Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于element如何初始化組件功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

上篇文章學習了 tdesign-vue 初始化組件的方式，這篇文章學習一下element組件庫是如何初始化組件的。

資源：

源碼地址：element-analysis/new.js

源碼

入口文件

找到用于初始化組件的腳本，位置如圖：

開始

腳本的開始引用了一些文件，說明了腳本所要用到的工具都有那些。

'use strict';

console.log();
process.on('exit', () => {
  console.log();
});

if (!process.argv[2]) {
  console.error('[組件名]必填 - Please enter new component name');
  process.exit(1);
}

// 處理文件和目錄路徑
const path = require('path');
// 內(nèi)置的 Node.js 模塊，它提供文件系統(tǒng)操作，比如對文件系統(tǒng)的讀寫。
const fs = require('fs');
// 用于文本保存
const fileSave = require('file-save');
// 這是一個將字符串轉(zhuǎn)換為 upperCamelcase 的庫
const uppercamelcase = require('uppercamelcase');

const componentname = process.argv[2];
const chineseName = process.argv[3] || componentname;
const ComponentName = uppercamelcase(componentname);
const PackagePath = path.resolve(__dirname, '../../packages', componentname);

該腳本首先使用 process 對象的 on 方法注冊一個回調(diào)函數(shù)，以便在進程退出時執(zhí)行?；卣{(diào)函數(shù)將一個空行記錄到控制臺。

然后，腳本檢查第二個命令行參數(shù)(process.argv [2])是否為真。如果它不是真值，那么腳本將記錄一條錯誤消息，并使用非零退出代碼退出進程(指示一個錯誤)。

然后，腳本聲明一些變量:

componentname 設(shè)置為第二個命令行參數(shù)(組件名)。
chineseName 設(shè)置為第三個命令行參數(shù)(組件的中文名稱) ，如果沒有提供第三個參數(shù)，則設(shè)置為組件名稱。
組件名設(shè)置為使用 upperCamelCase 庫將組件名轉(zhuǎn)換為 UpperCamelCase 的結(jié)果。
PackagePath 設(shè)置為包目錄的路徑，后跟組件名。

文件列表

const Files = [
  {
    filename: 'index.js',
    content: `import ${ComponentName} from './src/main';
    ... 省略部分內(nèi)容
    `
   },
   
   // ... 
 ]

之后腳本定義了一個Files變量，這個變量存儲了需要添加或者需要修改的文件列表，同時也指示了添加或者修改的內(nèi)容是什么。

那么具體都會修改那些文件呢：

index.js
4個說明文檔（zh-CN、en-US、es、fr-FR）
測試文件（/test/unit/specs）
主題文件（theme-chalk/src）
類型文件

添加到 components.json

// 添加到 components.json
const componentsFile = require('../../components.json');
if (componentsFile[componentname]) {
  console.error(`${componentname} 已存在.`);
  process.exit(1);
}
componentsFile[componentname] = `./packages/${componentname}/index.js`;
fileSave(path.join(__dirname, '../../components.json'))
  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
  .end('\n');

檢查組件名稱的對象屬性是否已經(jīng)存在于 componentsFile 對象中。如果存在，腳本將記錄一條錯誤消息，并使用非零退出代碼退出進程。

如果組件不存在于 ComponentsFile 中，腳本將在對象上設(shè)置一個新屬性，其中包含組件的名稱和到達組件主入口點的路徑的值(./package/${ Component entname }/index.js).

最后，腳本使用文件保存庫將修改后的 ComponentsFile 對象寫入 Components.json 文件，該文件采用縮進格式，并在文件末尾使用換行符。

其他文件的添加

// 添加到 index.scss
const sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');
const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;
fileSave(sassPath)
  .write(sassImportText, 'utf8')
  .end('\n');

// 添加到 element-ui.d.ts
const elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');

let elementTsText = `${fs.readFileSync(elementTsPath)}
/** ${ComponentName} Component */
export class ${ComponentName} extends El${ComponentName} {}`;

const index = elementTsText.indexOf('export') - 1;
const importString = `import { El${ComponentName} } from './${componentname}'`;

elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);

fileSave(elementTsPath)
  .write(elementTsText, 'utf8')
  .end('\n');
  
// 創(chuàng)建 package
Files.forEach(file => {
  fileSave(path.join(PackagePath, file.filename))
    .write(file.content, 'utf8')
    .end('\n');
});

// 添加到 nav.config.json
const navConfigFile = require('../../examples/nav.config.json');

Object.keys(navConfigFile).forEach(lang => {
  let groups = navConfigFile[lang][4].groups;
  groups[groups.length - 1].list.push({
    path: `/${componentname}`,
    title: lang === 'zh-CN' && componentname !== chineseName
      ? `${ComponentName} ${chineseName}`
      : ComponentName
  });
});

fileSave(path.join(__dirname, '../../examples/nav.config.json'))
  .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')
  .end('\n');

console.log('DONE!');

之后的代碼將修改 index.scss 與 element-ui.d.ts，創(chuàng)建 package，修改nav.config.json，使用的方式也和上述相同。