前端工作流之脚手架

发表于 更新于 本文字数： 735 阅读时长 ≈ 1 分钟
本文介绍关于前端工作流之脚手架，包括使用场景、实现细节等，以提高关于前端工作流之脚手架的效率。

本着DRY，本着生产力，前端基础设施有很多事情可以做。UI组件库，自定义ESLintRule，ESLint配置共享，CI配置共享等，这些机制可以一定程度的提升前端工作效率，但还有一个环节需要优化。 工作中本身并不单单只有一个项目，每个项目如果都开始从配置，实际上效率会很低。 为此业界有了很多的脚手架，比如creat-react-app，jhipster，但是第三方的往往要么过于简单，要么臃肿，根据自己实际需求打造脚手架才更为顺手。于是yeoman就派上用场了。

yeoman干嘛的？THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS。

没错，要的就是它，开搞。

配置步骤

  1. 创建生成器项目，比如这里叫generator-react-web,注意前缀固定为generator-
  2. 创建模版项目，比如这里我只创建一个react-web-template
  3. 生成器项目配置，主要支持用户选择配置选项
  4. npm link映射本地模块，方便测试
  5. OK后进行包发布，比如这里我是用NPM公共源发布
  6. 成功后，即可开心开启新项目了 
    1
    2
    3
    $ npm install -g generator-react-web.
    $ npm install -g @stacker/generator-react-web
    $ yo @stacker/react-web

具体配置参考官网及我这里的具体代码例子 即可，这里就不再贴出。

说明

  1. 这里个人推荐的设计是生成器独立仓库维护用于为用户提供各种交互设定，不断丰富完善需求功能
  2. 模版代码独立仓库进行维护，这样更干净
  3. 如果不想多仓库管理，也可以统一托管在生成器项目

写在最后

到了这一步，对于一个项目我们所能控制和统一的更多了，还有什么可做的？有，比如自定义一套CLI，那就等需求有了搞起吧。。。