• 本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
• 这是源码共读的第34期

学习目标

了解 TDesign 中组件初始化命令

• 新增组件： npm run init [组件名]
• 删除组件：npm run init [组件名] del

学习计划

1.克隆项目

• github仓库地址 github.com/Tencent/tde…
• github1s: github1s.com/Tencent/tde…

2.项目目录

3.调试代码

4.具体实现(代码分析)

1.init入口

2.config.getToBeCreatedFiles 获取被创建的文件

3.outputFileWithTemplate 使用lodash（_.template）预编译

function outputFileWithTemplate(item, component, desc, _d) {
    console.log(__dirname, 'dwx') //当前目录
    const tplPath = path.resolve(__dirname, `./tpl/${item.template}`);
    let data = fs.readFileSync(tplPath).toString(); //异步把文件的数据读出来
    const compiled = _.template(data); //lodash 操作 创建一个预编译模板方法，可以插入数据到模板中 "interpolate" 分隔符相应的位置
    data = compiled({
        component,
        upperComponent: getFirstLetterUpper(component),
    });
    const _f = path.resolve(_d, item.file);
    createFile(_f, data, desc);
}

4.addComponent，通过fs命令创建目录及组件

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. 为组件创建文件
            const contents = toBeCreatedFiles[dir];
            contents.files.forEach((item) => {
                if (typeof item === 'object') {
                    if (item.template) {
                        outputFileWithTemplate(item, component, contents.desc, _d);
                    }
                } else {
                    const _f = path.resolve(_d, item); // 路径
                    createFile(_f, '', contents.desc);// 直接写入文件
                }
            });
        });
    });
}

5.命令总结

node

process.cwd(); 子进程的当前工作目录

process.argv

属性返回数组，其中包含启动 Node.js 进程时传入的命令行参数。 第一个元素将是 process.execPath。 第二个元素将是正在执行的 JavaScript 文件的路径。其余元素将是任何其他命令行参数。

path.resolve 将路径或路径片段的序列解析为绝对路径

lodash

_.template(data)

创建一个预编译模板方法，可以插入数据到模板中 "interpolate" 分隔符相应的位置

感悟

1.复习node的一些操作 2.学习了一个构建项目的思想，可以使用在项目中减少部分操作 3.提升写笔记的能力