前端架构: 脚手架的开发流程和常用框架

脚手架的开发流程

• 脚手架的创建
  • $ npm init
• 脚手架的开发
  • 分包
    • 分包是指当我们一个脚手架比较复杂的时候，不可能把所有的js代码全部写在一个脚手架当中
    • 势必会把它建很多的不同的模块 package，通常我们会把它称之为一个分包的过程
    • 会和实际的这个项目一样，去做这个项目的分包
  • 参数解析
    • 脚手架通常不可能一个命令就能完成所有的功能，一定要一些辅助参数
    • 比如说创建项目的时候，要起一个项目的名称，比如 --name
    • 像这些参数解析都是需要 nodejs 的一个技术能力支持的
• 脚手架调试
  • $ npm link
  • $ npm unlink
  • 当开发完成之后，我们脚手架在本地还需要调试，因为脚手架上线之前一定是需要测试的
  • 这个脚手架在本地能够装起来进行测试
  • 这个时候会用到 npm link 和 npm unlink 这两个命令来完成脚手架的本地调试
• 脚手架发布
  • $ npm publish
  • 本地调试通过以后，就可以实现脚手架的一个发布
  • 通过 npm publish 就可以去做脚手架的一个上线发布了
  • 发布完以后，我们可以通过 npm install -g 来完成脚手架的安装

使用框架来搭建脚手架

• 为什么需要脚手架的框架？

  • 脚手架的框架，可以大幅度的提升脚手架的开发效率
    • 比如说在脚手架当中，想创建一个命令，命令后面要去配置各种属性
    • 在这个过程中，包括后续的维护迭代，修改的时候，是需要有一定的技巧的
    • 使用脚手架框架就可以让大家不需要去关注脚手架命令创建, 修改这些过程
    • 而专注于脚手架的业务开发，从而大幅提升脚手架开发速度
  • 可以简化脚手架开发流程，大幅度提高这个代码的可读性和可维护性
    • 在没使用脚手架框架之前，解析一条命令的时候
    • 可能会存在大量的很难阅读的逻辑，这套逻辑可能是不太好懂的
    • 而使用脚手架框架以后，代码里面的可读性可维护性都会非常大幅度增强

• 常用的脚手架框架

  • yargs
    • Weekly Downloads 73,386,359 动态数据
    • 案例：gulp-cli
  • commander
    • Weekly Downloads 113,310,535 动态数据
    • 案例
      • vue-cli
      • webapck-cli
      • create-react-app
  • oclif
    • Weekly Downloads 104,302 动态数据
    • 它是一个脚手架生成器，它本身会提供一个 oclif cli 就是这个脚手架生成器
      • 它会提供一个脚手架，帮你来生成自己的脚手架
      • 同时它中间还提供了一系列脚手架的核心方法, 帮助快速的构建脚手架
      • 而 oclif 会把每一个命令当成一个 class 来去看待
      • 直接基于ts编写