腾讯开源组件库tdesign-vue:新增组件时是如何初始化的

git@github.com:Tencent/tdesign-vue.git

npm i

npm run init aehyok

const [component, isDeleted] = process.argv.slice(2);

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

const cwdPath = process.cwd();
const indexPath = path.resolve(cwdPath, 'src/index.ts');

const config = require('./config');
const toBeCreatedFiles = config.getToBeCreatedFiles(component);

if (isDeleted === 'del') {
    deleteComponent(toBeCreatedFiles, component);
    deleteComponentFromIndex(component, indexPath);
  } else {
    addComponent(toBeCreatedFiles, component);
    insertComponentToIndex(component, indexPath);
  }

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);
        }
      });
    });
  });
}

// 通过分隔符创建编译模板然后通过变量进行替换，骚的一批
var compiled = _.template('hello <%= user %>!');\
compiled({ 'user': '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);
}

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');
    }
  });
}

function getSnapshotFiles(component) {
  return {
    [`test/unit/${component}/__snapshots__/`]: {
      desc: 'snapshot test',
      files: ['index.test.js.snap', 'demo.test.js.snap'],
    },
  };
}

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');
}

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);
  }
}

// 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');
    }
  });