create-react-app、ng、vue-cli 3比较

vue-angular-react-cli

React,Angular,Vue三个者在不断进化的过程中互相学习彼此的优点,CLI(命令行)工具便是其中一个。

命令行工具是最直接快捷的获取工程定制信息的方式。配合已有的Node.js命令行工具编写库,可以做出很漂亮的效果。

据我所知Ruby on Rails是比较早的提供了方便的命令行脚手架功能的Web框架。通过rails命令行工具,可以方便生成工程框架、controller、modle、view、数据库migration等代码。之后各种框架争相效仿,提供了自己的命令行工具。

前端工程日趋复杂,对于前端新手来说,配置Webpack本身已经成为一个门槛。为了推广自己的框架,三者都推出了一键生成工程的命令行工具以简化工程的创建屏蔽Webpack带来的复杂性:create-react-app(CRA)、ng、vue-cli

但对于有些工程需要修改Webpack配置进行定制。

内置Webpack配置在哪里?

这些命令行工具本质上都是:npm scripts + Webpack config presets + Webpack Dev Server

这正是我们自己搭建基于Webpack前端框架的基本部件。这些工具只是将他们封装在对应的npm package里。

下面就是三个工具对应的内置Webpack配置文件所在目录。在它们旁边,你还能找到其他两个部件。

  • vue-cli:node_modules/@vue/cli-service/lib/config
  • ng:node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs
  • CRA:node_modules/react-scripts/config

修改内置Webpack配置

create-react-app和ng

都是通过eject命令(ng新版本已经移除该命令)将配置和对应的脚本抽取到工程目录。

eject是一个『不可逆』的操作。会修改工程的package.json文件。

Github上有一些项目fork了CRA,增加了override Webpack配置的能力,实现不eject便可定制的能力。比如:react-app-rewired+customize-crareact-script-rewired。但这些项目都是非官方维护,无法得到及时更新。

vue-cli 3

引入了webpack-chain,在vue.config.js中对内置webpack进行调整。查看配置文档

vue add <plugin-name>命令可以方便的添加非内置插件。官方还提供了详尽的编写插件的文档

你可以通过在Github搜索以vue-cli-plugin开头的工程名来找到插件源码,作为编写插件的参考。

ng

ng也有add命令。比如,可以通过 ng add ng-cli-pug-loader 命令为工程添加使用pug模板能力。但是官方缺少这方面的文档。并且Github上的插件也很少。

代码生成

这方面ng做的比较好。通过ng generate命令可以生成工程各部分代码。

vue-cli也有这个能力。通过编写vue-cli-plugin+generator,可以编写出各种代码生成命令。

 

结束语

对于小工程,通过命令行一键生成非常高效。

但作为架构者需要了解命令后面的技术细节,做到按需定制。

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top