element如何初始化組件功能詳解
前言
上篇文章學習了 tdesign-vue 初始化組件的方式,這篇文章學習一下element組件庫是如何初始化組件的。
資源:
源碼
入口文件
找到用于初始化組件的腳本,位置如圖:

開始
腳本的開始引用了一些文件,說明了腳本所要用到的工具都有那些。
'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');
// 內置的 Node.js 模塊,它提供文件系統(tǒng)操作,比如對文件系統(tǒng)的讀寫。
const fs = require('fs');
// 用于文本保存
const fileSave = require('file-save');
// 這是一個將字符串轉換為 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 方法注冊一個回調函數(shù),以便在進程退出時執(zhí)行?;卣{函數(shù)將一個空行記錄到控制臺。
然后,腳本檢查第二個命令行參數(shù)(process.argv [2])是否為真。如果它不是真值,那么腳本將記錄一條錯誤消息,并使用非零退出代碼退出進程(指示一個錯誤)。
然后,腳本聲明一些變量:
- componentname 設置為第二個命令行參數(shù)(組件名)。
- chineseName 設置為第三個命令行參數(shù)(組件的中文名稱) ,如果沒有提供第三個參數(shù),則設置為組件名稱。
- 組件名設置為使用 upperCamelCase 庫將組件名轉換為 UpperCamelCase 的結果。
- PackagePath 設置為包目錄的路徑,后跟組件名。
文件列表
const Files = [
{
filename: 'index.js',
content: `import ${ComponentName} from './src/main';
... 省略部分內容
`
},
// ...
]之后腳本定義了一個Files變量,這個變量存儲了需要添加或者需要修改的文件列表,同時也指示了添加或者修改的內容是什么。
那么具體都會修改那些文件呢:
- 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');檢查組件名稱的對象屬性是否已經存在于 componentsFile 對象中。如果存在,腳本將記錄一條錯誤消息,并使用非零退出代碼退出進程。
如果組件不存在于 ComponentsFile 中,腳本將在對象上設置一個新屬性,其中包含組件的名稱和到達組件主入口點的路徑的值(./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,使用的方式也和上述相同。
總結
組件初始化腳本,很大程度上提高了開發(fā)效率,避免了程序員們將精力浪費在做重復的事情上,在我們日常的開發(fā)中也可嘗試寫一些這樣的腳本。
到此這篇關于element如何初始化組件功能的文章就介紹到這了,更多相關element初始化組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Element-ui tree組件自定義節(jié)點使用方法代碼詳解
本文通過實例代碼給大家介紹了Element-ui tree組件自定義節(jié)點使用方法 ,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
Vue+Java+Base64實現(xiàn)條碼解析的示例
這篇文章主要介紹了Vue+Java+Base64實現(xiàn)條碼解析的示例,幫助大家實現(xiàn)條碼解析,感興趣的朋友可以了解下2020-09-09

