各脚手架区别
- 各脚手架区别
- vite脚手架
- create-react-app脚手架
- vue-cli脚手架
各脚手架区别
| vite | create-react-app | vue-cli |
---|
适用 | react/vue都可用 | 只适用于react | 只适用于vue |
基于 | 基于rollup打包 | 基于webpack打包 | 基于webpack打包 |
创建项目 | npm create vite@latest 项目名称 | npx create-react-app 项目名称 | vue create 项目名称 |
修改配置 | 在vite.config.js/ts修改 | 三种方式,具体看下文 | 在vue.config.js修改 |
vite脚手架
create-react-app脚手架
方式一:git操作:到 commit 这个步骤npm eject :解析所有webpack配置发现缺点:webpack无关依赖太多太杂,config配置太杂,而且解包后不可逆。(所以不推荐。只能作为参考)
方式二:安装依赖:react-app-rewired customize-cra根路径:创建config-overrides.js文件修改打包命令:react-scripts 改为 react-app-rewired修改具体配置:使用customize-cra中提供的对应修改方法发现缺陷:起别名时,大部分组件导入没问题,部分组件导入居然会报错。会覆盖配置,比如自带的less需要重新配置,而且按他的方式配置居然会报错。(所以不推荐。各种报错花里胡哨)
方式三:安装依赖:@craco/craco根路径:创建craco.config.js文件修改打包命令:react-scripts 改为 craco修改具体配置:使用craco中提供的对应修改方法发现缺陷:会覆盖配置(推荐!!!)
vue-cli脚手架