自定义脚手架song-cli

项目结构：
song-cli脚手架：从零搭建一个自定义的脚手架，依赖项主要是使用第三方仓库

远端仓库项目：song-cli脚手架拉取的项目都放在GitHub上，主要有single-spa，qiankun，webpack等项目

项目背景：
了解脚手架运行的机制、流程
熟悉微前端架构、不同技术栈之间的区别与联系
熟悉webpack常用知识点
song-cli结构流程分析：
什么是脚手架(cli)：

脚手架工具是指通过操作简单的命令，在本地创建自己所需要的项目模版，搭建好项目开发的基础运行环境。常见的cli工具有

vue-cli、create-react-app等

cli运行流程：

command构建自定义命令：

安装：

npm install commander --save
使用：

version：指定cli的版本

command：添加命令

option：为command自定义的命令，配置选项

discription：添加相关描述

action：执行自定义命令的回调函数

on：监听事件，监听命令

parse：获得cmd中输入的参数，并进行解析

例子：

const program = require(“commander”);

program
.command(“create ”)
.description(“create a new project”)
.option(“-f , --force”, “overwrite target directory if it exist”)
.action((name, options) => {
require(“…/bin/create.js”)(name, options);
});

program
.on(“–help”, () => {
console.log(
\r\nRun ${chalk.cyan( zr --help )} for detailed usage of given command\r\n
);
});

// parse方法用来解析命令行中传入的参数
program.parse(process.argv);

inquirer构建选择与用户进行交互，获取用户信息：

安装：

npm install inquirer --save
使用：

var inquirer = require(‘inquirer’);
inquirer
.prompt([
/* Pass your questions in here */
])
.then((answers) => {
// Use user feedback for… whatever!!
})
.catch((error) => {
if (error.isTtyError) {
// Prompt couldn’t be rendered in the current environment
} else {
// Something else went wrong
}
});
官网：inquirer官网

chalk命令行美化：

安装：

npm install chalk --save
使用：

import chalk from ‘chalk’;

console.log(chalk.blue(‘Hello world!’));
官网：chalk官网

ora命令行动画效果：

安装：

npm install ora --save
使用：

import ora from ‘ora’;

const spinner = ora(‘Loading unicorns’).start();

setTimeout(() => {
spinner.color = ‘yellow’;
spinner.text = ‘Loading rainbows’;
}, 1000);
官网：ora官网

download-git-repo拉取项目：

安装：

npm install download-git-repo --save
使用：

download(‘direct:https://gitlab.com/flippidippi/download-git-repo-fixture/repository/archive.zip’, ‘test/tmp’, function (err) {
console.log(err ? ‘Error’ : ‘Success’)
})
官网：download-git-repo官网

npm link 链接全局：

作用：将编写的npm包资源链接到全局，这样在电脑的任何地方都可以使用该npm包资源

原理：首先npm link会为当前npm包创建链接，指定到全局的node-modules目录下，然后会执行该npm包中package.json的bin目录下的文件

微前端浅析：
什么是微前端？

微前端思想来源于后端的微服务，随着前端工程越来越重，一个项目管理着众多的业务，这样就导致着项目管理成本的上升，而且维护起来有难度，往往牵一发而动全身，所以微前端出现，来解决这种局面。微前端是拆分复杂的项目，将拆分的子业务部署为子应用，这样就实现了独立开发、独立部署、测试、维护等

实现微前端的技术栈：

现在实现微前端架构的技术栈主要有三种：iframe、qiankun、single-spa

single-spa：

single-spa是比较早的提出来实现微前端的技术栈了，但是也存在着不小的问题，比如css样式隔离、js隔离、手动加载js资源、跨域等。single-spa的生态是非常完善的，这也使single-spa的缺点一一解决。

qiankun：

不在需要手动加载js代码和跨域、内部使用fecth进行处理
对js代码和css样式进行了隔离，js代码采用快照和沙箱、css样式采用ShadowDOM 和 Scoped CSS
可参考文档：qiankun浅析

从零基于webpack构建一个自定义的项目模版