随着前端工程化的理念不断深入,我们会更多的选择使用脚手架从零到一搭建自己的项目。大家熟悉的create-react-app
和vue-cli
,它们可以帮助我们初始化配置生成项目结构、自动安装依赖,最后我们一行指令可运行项目开始开发,或者进行项目构建(build)。这些脚手架提供的都是普遍意义上的最佳实践,但是实际开发中发现,随着业务的不断发展,必然会出现需要针对业务开发的实际情况来进行调整。例如:
- 通过调整相关插件与配置实现打包后的性能优化
- 项目架构调整、编码风格
- 用户权限控制
- 融合公司的基建
- ...
总而言之,随着业务发展我们往往需要沉淀并制作出一套更“个性化”的业务方案。这时候我们最直接的做法就是开发出一个该方案的脚手架来,以便今后能复用这些最佳实践与方案
1.脚手架整体架构设计与基本流程
如上图所示,是一个完整的脚手架npm包结构图,我们想要通过发布该npm包之后,通过全局 npm install -g llzscc_cli
安装该包之后,可以通过llzscc init tenplateName
初始化直接拉取生成我们需要的项目工程模板,力图做的直接上手开发,免去项目开始初期的架构设计和初始模块的开发成本。通过这种方式我们只需要致力于优化同一个模板,该模板可以应用于各个项目开发中。
上图所示,通过打开终端执行我们自己定义的终端命令来拉取需要的模板 templates
。在脚手架开发过程中我们需要引入一些特定的第三方库:
库名 | 描述和作用 |
---|---|
commander | 处理控制台命令 |
chalk | 控制台的效果显示 |
inquirer | 控制台询问 |
download-git-repo | git远程仓库拉取 |
ora | 命令行环境的loading效果 |
2.前端模板脚手架 llzscc_cli 的实现
上图是我当前新写的一个前端脚手架npm发布包源码,已经发布www.npmjs.com/package/llz…, 当前版本功能还比较简单,只做了基础的模板配置,通过全局安装该包:npm install -g llzscc_cli ,有以下commander 命令对应不同的功能:
commander 命令 | 功能描述 |
---|---|
llzscc init xxx(模板名) | 初始化生成一个比较完整的前端项目工程,该工程封装了基本的编译打包、登陆权限、路由权限等 |
llzscc create xxx(模板名) | 生成一个可选的前端模板(包括各种组件 vue 、vue-router、vuex 等) |
llzscc --version | 查看当前包的版本 |
llzscc --help | 帮助指令 |
对于该脚手架的整个源码实现可以通过我的文章:juejin.cn/post/698321… 来具体了解,此处我就不再展开,我们现通过一系列的操作命令来看下能达到一个什么效果:
2.1 llzscc init xxx(模板名)
1.全局安装好llzscc_cli 的最新依赖包之后,可以通过 llzscc --version 来查看是否安装成功:
2.验证包安装成功之后,我们执行命令:llzscc init templateA, 开始初始化生成指定的模板。
3.模板下载成功。以及对应的生成模板项目,该项目模板是具备完善前端基础功能项目模板,对于企业级的项目开发可以做到开箱即用,大大提升开发效率。
2.1 llzscc create xxx(模板名)
1.执行命令:llzscc create templateB 在终端显示出可选项安装模板。
2.选择指定模板后在选择指定的版本。
3.下载完成模板并成功安装。
3.相关源码
- npm地址:www.npmjs.com/package/llz…
- 模板github地址:github.com/llz1990/llz…