生成前端代码的一些工具介绍

在前端开发的过程中,很多相同的代码会写很多遍。如:开始新项目的时候,要写和旧项目类似脚手架代码;新建一个组件的时候,要按约定写组件结构。如果这些重复代码能用工具来生成,能提升前端的开发效率。

生成代码的工具分为两类:基于命令的和基于图像界面的。

基于命令的工具的优点是,可配置高,效率快。缺点是,可发现性差。适合配置项目很多,配置可以组合的情况。

基于图像界面的优点是,可发现性强,操作简单。缺点是如果配置项很多,容易变得很难用。

罗嗦了一堆,下面开始介绍正题。

项目脚手架代码生成工具

项目脚手架主要做的项目的构建流程,环境的配置等。做到开箱即用。

基于命令的

  • yo 曾经流行过的一个脚手架生成工具。支持定义脚手架内容。基于 yo 的第三方脚手架也很多。
  • vue-cli 。 Vue 项目脚手架。支持自定义脚手架内容,感兴趣的可以读读 从vue-cli源码学习如何写模板
  • create react app React 脚手架。比较轻量级,只是整合 webpack 和 react-router。
  • react boilerplate React 脚手架。比较重量级,整合了webpack 和 react router, redux, redux suga, reselect 等。

基于图形界面的

组件代码生成工具

基于命令的

页面代码生成工具

基于命令的

  • 代码编辑器的代码片段(Code Snippent)功能。主流的代码编辑器(Sublime,Atom,VS Code,Web Strom等) 都支持代码片段。也有写好的代码片段的编辑器插件。主流的框架基本都有对应的代码片段工具。

基于图形界面的

  • H5营销页面生成工具。有一大堆。
  • GrapesJS 强大的网页生成器。开源。
  • LayoutIt 托拽 Bootstrap 组件,生成页面。