慕课乐高组件库模版开发
资源网址: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"]
配置和实现业务代码进行解耦,这是架构中非常常用的方式。业务代码可以理解为框架,真正需要修改业务代码形态的时候,通过些配置就可以实现。