前端架构师-week6-实现组件库完整初始化流程

慕课乐高组件库模版开发

  资源网址：https://github.com/imooc-lego/lego-components

# 组件库模版开发

mkdir imooc-cli-dev-lego-components
cd imooc-cli-dev-lego-components/
npm init -y
mkdir template
cd template/
# 把资源仓库代码克隆到 template
# 删除 .git、package-lock.json
# 修改 package.json 中的 name、version、description 为 ejs 模版

cd imooc-cli-dev-lego-components/
npm publish

// mongodb 中模版数据增加属性
tag: ['project']
tag: ['template']
type: 'normal'/'custom'

项目和组件模版数据隔离+动态配置ejs ignore

    const { type } = await inquirer.prompt({
        ......
    });
    log.verbose('type', type);
    this.template = this.template.filter(template =>
      template.tag.includes(type));

获取组件信息功能开发 

      // 复用 获取项目信息功能代码，加入获取组件描述信息prompt

      const descriptionPrompt = {
        type: 'input',
        name: 'componentDescription',
        message: '请输入组件描述信息',
        default: '',
        validate: function(v) {
          const done = this.async();
          setTimeout(function() {
            if (!v) {
              done('请输入组件描述信息');
              return;
            }
            done(null, true);
          }, 0);
        },
      };
      projectPrompt.push(descriptionPrompt);
      // 2. 获取组件的基本信息
      const component = await inquirer.prompt(projectPrompt);
      projectInfo = {
        ...projectInfo,
        type,
        ...component,
      };

 解决组件库初始化过程中各种工程问题

·删除 组件库package.json 中的 "files": ["dist"]，否则只会上传 dist 到 npmjs。

·ejs 处理 png 文件会报错。在 mongodb 模版信息中追加 "ignore": ["**/public/**", "**.png"]

  配置和实现业务代码进行解耦，这是架构中非常常用的方式。业务代码可以理解为框架，真正需要修改业务代码形态的时候，通过些配置就可以实现。