组件库在添加一个组件的时候,可能会涉及到很多初始化的问题,比如要添加组件库入口文件、组件的说明文档文件、demo例子的入口文件,单元测试的入口文件等等
那么通过本文可以了解到一个命令来处理这些文件的初始化,省去了很多的手动处理
- 1、克隆代码
- 2、查看package.json文件
- 3、运行命令
- 4、调试命令
- 5、调试npm run init aehyok 命令
- 6、可自行调试npm run init aehyok del
- 7、总结
1、克隆代码
git@github.com:Tencent/tdesign-vue.git
2、查看根目录下的package.json
- scripts脚本命令很多
- dependencies依赖不少
- devDependencies 依赖巨多
- 东西太多我们今天重点就来学习一下其中的
init
命令,实际执行的命令为node script/init
3、运行命令(新增开发组件时初始化的文件)
3.1.安装依赖
npm i
3.2.本地运行
npm run init aehyok
运行结束后可以发现项目中多了一些文件,截图如下
这就是新增一个开发组件时,可以通过命令的方式,一键将各个文件进行初始化,这样其实节省了很多新建文件的重复工作,以及防止某些文件的遗漏,不得不说碉堡了。那接下来我们看看具体的逻辑是什么样的
4、调试命令
在vscode中通过使用快捷键:Ctrl + Shift + P
,出现以下截图
Auto Attach
也就是第一个Debug: 奇幻开关自动附加
,然后鼠标点击或者通过Enter
选中,选中后效果如截图
选中智能即可。
接着我们打开终端命令行在命令行中输入npm run init aehyok
,同时我们找到script/init/index.js文件,在文件末尾的init()
位置打上断点。
看到如上所示截图,说明我们的调式命名成功了。
5、调试npm run init aehyok命令
5.1、init()算是index.js入口函数
const [component, isDeleted] = process.argv.slice(2);
process.argv读取命令行的参数 第一个索引为0的是Nodejs的路径 第二个索引为1的是当前js文件的所在路径 第三个也就是索引为2之后的才是我们命令行中自己定义的 通过定义两个变量 component
和 isDeleted
,获取process.argv的第三和第四个参数
5.2、获取参数后进行判断
if (!component) { console.error('[组件名]必填 - Please enter new component name'); process.exit(1); }
如果变量component
为空,则进行提示错误,并退出命令行的执行
5.3、获取路径
const cwdPath = process.cwd(); const indexPath = path.resolve(cwdPath, 'src/index.ts');
通过process.cwd()
获取当前项目的工作目录(相当于根目录) 然后通过path.resolve
拼接src下index.ts的完整路径
5.4、获取将要添加的文件
模板对象
const config = require('./config'); const toBeCreatedFiles = config.getToBeCreatedFiles(component);
与index.js同目录下另外一个文件config.js,是一个目录为key,将要添加的文件列表为值的一个数组,其中 files属性则是要添加的文件。 通过传入一个组件名称,生成的对象如下图所示
5.5、判断是添加还是删除
if (isDeleted === 'del') { deleteComponent(toBeCreatedFiles, component); deleteComponentFromIndex(component, indexPath); } else { addComponent(toBeCreatedFiles, component); insertComponentToIndex(component, indexPath); }
通过isDeleted
来判断,这里我们的命令行参数中并未传值,所以下一步开始执行添加和插入的操作
5.6、addComponent添加组件
我们重点来看一下addComponent函数,先是通过Object.keys来循环上图中的keys值。
function addComponent(toBeCreatedFiles, component) { // At first, we need to create directories for components. // 循环上图中五个路径的数组对象 Object.keys(toBeCreatedFiles).forEach((dir) => { // 拼接路径 const _d = path.resolve(cwdPath, dir); // 根据拼接路径,如果不存在,先创建路径文件夹 fs.mkdir(_d, { recursive: true }, (err) => { if (err) { utils.log(err, 'error'); return; } console.log(`${_d} directory has been created successfully!`); // Then, we create files for components. // 从路径模板对象中找到对应的key值 const contents = toBeCreatedFiles[dir]; // 获取当前节点的files数组进行循环 contents.files.forEach((item) => { // item为object对象时 if (typeof item === 'object') { if (item.template) { outputFileWithTemplate(item, component, contents.desc, _d); } } else { // 看到了有一个e2e test就是一个字符串 const _f = path.resolve(_d, item); createFile(_f, '', contents.desc); } }); }); }); }
5.7、outputFileWithTemplate
接下来再来看item为object时的函数,这里面涉及到一个简单的函数getFirstLetterUpper
,将传入的字符串转换为首字母大写。
再来看一下lodash中的template方法,看一个例子应该就明白了。更多的用法可以去 www.lodashjs.com/docs/lodash…
// 通过分隔符创建编译模板然后通过变量进行替换,骚的一批 var compiled = _.template('hello <%= user %>!');\ compiled({ 'user': 'world' });
最终打印出来的是hello world
接下来继续看整个函数
function outputFileWithTemplate(item, component, desc, _d) { const tplPath = path.resolve(__dirname, `./tpl/${item.template}`); let data = fs.readFileSync(tplPath).toString(); const compiled = _.template(data); data = compiled({ component, upperComponent: getFirstLetterUpper(component), }); const _f = path.resolve(_d, item.file); createFile(_f, data, desc); }
第一行的代码又是来拼接路径的,看了一下tpl文件夹下的文件
竟然是模板字符串,应该是用来生成初始化文件的
第二行通过fs.readFileSync来读取模板字符串
然后下面就是lodash的templte方法和compiled方法,就是根据预设变量进行模板字符串替换
替换完毕后,就要通过方法createFile
生成文件了
function createFile(path, data = '', desc) { fs.writeFile(path, data, (err) => { if (err) { utils.log(err, 'error'); } else { utils.log(`> ${desc}\n${path} file has been created successfully!`, 'success'); } }); }
就是通过fs.writeFile函数将替换后的模板字符串,一起生成并写入到文件中去,这样addComponent
方法算是执行完毕了
5.8 同理看一下deleteComponent
其中包含一个 getSnapshotFiles
function getSnapshotFiles(component) { return { [`test/unit/${component}/__snapshots__/`]: { desc: 'snapshot test', files: ['index.test.js.snap', 'demo.test.js.snap'], }, }; }
通过函数可以发现主要是执行单元测试的时候生成测试的快照文件 snapshots,这里我们就简单的提一下(实际上是我去查了一下),不做过深的学习。
接着看主函数
function deleteComponent(toBeCreatedFiles, component) { const snapShotFiles = getSnapshotFiles(component); const files = Object.assign(toBeCreatedFiles, snapShotFiles); Object.keys(files).forEach((dir) => { const item = files[dir]; if (item.deleteFiles && item.deleteFiles.length) { item.deleteFiles.forEach((f) => { fs.existsSync(f) && fs.unlinkSync(f); }); } else { utils.deleteFolderRecursive(dir); } }); utils.log('All radio files have been removed.', 'success'); }
将快照的文件夹及相关文件对象,一起合并到toBeCreatedFiles
上,这个在上面说过可以回头查看。 接下来循环files,对数组中的每个对象也就是每个文件夹下的文件进行遍历的。
这里发现deleteFiles属性是不存在的,唯一存在的地方是关于ssr的地方,这里也做了注释处理所以直接看
function deleteFolderRecursive(path) { // 先判断路径是否存在 if (fs.existsSync(path)) { // 路径存在则读取path路径下的所有文件,进行循环 fs.readdirSync(path).forEach((file) => { const current = `${path}/${file}`; // 如果current是一个路径目录则进行递归调用 if (fs.statSync(current).isDirectory()) { deleteFolderRecursive(current); } else { // 如果是个文件则删除即可 fs.unlinkSync(current); } }); // 上面文件删除了,再进行目录的删除 fs.rmdirSync(path); } }
5.9 字符串的替换函数replace
// last import line pattern const importPattern = /import.*?;(?=\n\n)/; const cmpPattern = /(?<=const components = {\n)[.|\s|\S]*?(?=};\n)/g; let data = fs.readFileSync(indexPath).toString(); data = data.replace(importPattern, (a) => `${a}\n${importPath}`).replace(cmpPattern, (a) => `${a} ${upper},\n`); fs.writeFile(indexPath, data, (err) => { if (err) { utils.log(err, 'error'); } else { utils.log(`${desc}\n${component} has been inserted into /src/index.ts`, 'success'); } });
上面是两个正则,通过字符串的replace函数来替换掉字符,替换后将字符串再写会源文件。
5.10 deleteComponentFromIndex
删除的逻辑跟添加的逻辑一致
6、总结
- 学习到一个命令创建组件库的初始化文件
- lodash的template、compiled 模板字符串的编译替换生成想要的字符串,再写入文件
- 对于nodejs的删除文件、创建文件、删除文件夹、创建文件夹、写入文件等操作,本质对fs的操作的熟悉
- 关于两个正则通过repace替换的第二个正则理解有点费解,有时间再学习一下正则表达式