webpack cli 脚手架封装

项目的背景

去年做的项目了，最近来整理下，先描述下项目背景，在微前端乾坤的项目考虑到了许多额外的场景，计划用微前端把后台打造成平台化的性质，承载着不同的项目系统，即有老版本后台（php项目），又有新版本后台SPA项目、公司的ERP系统、商家中心系统等等，使用一套的账户密码，一套的权限控制流程把公司的生态串联起来。
考虑到这些的同时也想到了日后团队技术多样性，所以在基础尝试阶段也针对乾坤框架做了扩展性的考察，融入了html、vue、react、angular、还包括了服务端渲染的nuxt、做了尝试把这些项目整合到一起来模拟以后团队技术多样性的基础。
通信方面，针对html 乾坤 通过注入 props 到主页面html，主页面使用 postMessage 与子页面 addEventListener 的方式完成通信流程
针对vue 乾坤 通过注入 props 到vue 在根节点使用 传入vuex
针对react 乾坤 通过注入 props 到react 在根节点使用 传入redux
针对angular 乾坤 通过注入 props 到angular 在根节点使用 传入rxjs.... 有点扯远了
在建立多样性的项目适合发现，写vue 和 react 组件的过程中 每个子项目都有自己的node_modules 如果多个vue 或是 多个react 时他们的 node_modules 基本相同，同样的东西要反复下载这很不舒服，因为node_modules文件夹的确大得很，其次看着很不舒服，打开package 看一眼一堆依赖。
针对第一个问题我之前打算的是 在主应用安装依赖，子应用运行的时候 把主应用的node_modules 用软连接的形式拷贝到自己的目录中，但是这样有个问题，任何一个子应用如果想安装一些其他的额外依赖，即本项目特定的第三方，则必须安装到主应用，可能到后来主应用本来没什么业务但是却下载了很多依赖这就让人很不爽。
思路了一圈计划写个cli，这个cli呢暂定几个简单功能，可以初始化项目、本地开发运行项目、可发布打包项目。这样多个子应用共用的npm 就可以放在cli上了，基本上就是大量的loade plugin babel 可以提取出来。

程序编写

1、定义入口文件，文件入口处定义命令的开始 不同的命令分流到不同的程序中处理。

image.png

定义命令的插件 commander 定义命令名称 参数 定义描述 定义选项 定义回调
crossEnvMap 函数 根据传递进来的参数动态设置 环境变量

2、进入Server

image.png

判断了下拦截 环境变量不对提示出错误信息
app_host 是辅助文件可以返回当前项目的name 和 启动的端口，这些信息会存到子程的package中，每个项目的端口不同这样可以完成自定义。

这里有个重要的概念大多数的操作路径是在命令执行目录完成的，所以很多操作都是要拼接目录，用命令执行的目录拼接相对目路径达到想要的目录

image.png

3、拼接命令
和普通的方式不一样，本套脚手架是像围绕着微前端的体系打造的，有两种情况，直接在子应用中执行，或是在主应用中执行，主应用执行的时候 会让用户选择一个子应用一起执行，（上一篇乾坤文章有提过，主应用不包括业务逻辑所以单独运行起来只是一个空壳），如何让执行主应用时再开启一个子应用呢，是用执行命令的形式 类似 node child_process exec 直接执行命令字符串，但是这样是有弊端的node执行命令是顺序执行，每运行开启一个子应用时，这个子应用都是一直保持活跃的因为有webpack server 一直占用进程 他要开启本地服务 开启长连接 开启文件轮询监测 一旦开启后不手动关闭是代表这个服务没有关闭同时node不会进入下一个执行语句。
使用concurrently可以同时运行多个服务。

image.png

4、再次执行后 这些命令会重新进入index.js 然后经过命令的判断分流又是简单的走了一遍 只不过这次会执行到真正启动webpack的地方，使用node来执行。

image.png

5、初始化文件
build的过程就不展示出来了 和 开启本地运行差不多 只是 webpack用run运行 不使用server执行
初始化文件流程也很简单，询问要初始化文件的模板类型 是手机还是pc，询问下载后的项目文件夹名称，询问要保存的路径 使用 inquirer 询问完毕后根据结果执行下载即可

image.png

image.png

6、给大家看下使用脚手架之后的项目配置样子 清爽了很多，把公共类的功能提取到了一起。

image.png

以前devDependencies 一大坨 现在就剩这么几项了，现在把loader plugin babel基本全部移除了。

总结几点注意事项。
第一、cli保存的目录和项目执行的目录是不一样的，所以想运行什么要使用path.join(process.cwd(), dir) 拼接出执行目录
第二、配置配置项 例如 babel额外的配置 postCss 甚至是eslint的额外配置就不能以外部的形式 使用lrc文件配置了，配置到cli目录插件找不到，配置到项目中又不共有，所以就直接在loader中使用 options 扩展配置来完成