生成前端代碼的一些工具介紹

在前端開發的過程中，很多相同的代碼會寫很多遍。如：開始新項目的時候，要寫和舊項目類似腳手架代碼；新建一個組件的時候，要按約定寫組件結構。如果這些重複代碼能用工具來生成，能提升前端的開發效率。

生成代碼的工具分為兩類：基於命令的和基於圖像界面的。

基於命令的工具的優點是，可配置高，效率快。缺點是，可發現性差。適合配置項目很多，配置可以組合的情況。

基於圖像界面的優點是，可發現性強，操作簡單。缺點是如果配置項很多，容易變得很難用。

羅嗦了一堆，下面開始介紹正題。

項目腳手架代碼生成工具

項目腳手架主要做的項目的構建流程，環境的配置等。做到開箱即用。

基於命令的

• yo 曾經流行過的一個腳手架生成工具。支持定義腳手架內容。基於 yo 的第三方腳手架也很多。
• vue-cli 。 Vue 項目腳手架。支持自定義腳手架內容，感興趣的可以讀讀 從vue-cli源碼學習如何寫模板。
• create react app React 腳手架。比較輕量級，只是整合 webpack 和 react-router。
• react boilerplate React 腳手架。比較重量級，整合了webpack 和 react router, redux, redux suga, reselect 等。

基於圖形界面的

• 定製 Bootstrap 3

組件代碼生成工具

基於命令的

• react boilerplate 的 nam run generate 可生成組件的腳手架代碼。

頁面代碼生成工具

基於命令的

• 代碼編輯器的代碼片段(Code Snippent)功能。主流的代碼編輯器(Sublime,Atom,VS Code，Web Strom等) 都支持代碼片段。也有寫好的代碼片段的編輯器插件。主流的框架基本都有對應的代碼片段工具。

• Emmet 提供 HTML，CSS，JS 的自動補全功能。
• Bootstrap 3 Snippets
• Vuejs Snippets

基於圖形界面的

• H5營銷頁面生成工具。有一大堆。

• Maka
• 初夜
• 兔展

• GrapesJS 強大的網頁生成器。開源。
• LayoutIt 托拽 Bootstrap 組件，生成頁面。

推薦閱讀：