webpack + create-react-app创建react脚手架和使用 vite工具构建项目

---------------------------------- webpack + create-react-app -------------------------------------

1, 安装react代码行工具(脚手架), 基于webpack工具构建项目
    cnpm/npm install -g create-react-app
2,创建一个react应用程序, my-app是自定义项目名
    create-react-app my-app
3,启动react项目 (需要cd进入项目my-app根目录)
    npm start

注意: 在使用 create-react-app 来创建一个新的React应用,在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令
    npm config set registry https://registry.npm.taobao.org
可以把npm指令替换成cnpm指令 


问题: 安装脚手架报错: The fs.promises API is experimental
原因: npm版本过高或node版本过低 
解决: npm i npm@6.4.1 -g


--------------------------------  使用 vite工具构建项目  ----------------------------------

1, 安装vite构建工具
    cnpm i vite create-vite -g
2, 使用vite构建项目, 选择react
    npm init vite
3, 切换到项目根目录, 安装依赖包
    cnpm i   /  npm i   /  yarn install
4, 运行,启动vite项目
    npm run dev

npx create-react-app使用Vite创建React应用都是常见的前端工具,它们各有优缺点。 优点: npx create-react-app: - 简单易用:create-react-appReact官方提供的脚手架工具使用简单,适合快速搭建React项目。 - 完善的生态系统:create-react-app集成了许多常用的工具和配置,如Babel、Webpack等,使得开发者无需手动配置即可进行开发。 - 社区支持:由于create-react-app广泛使用,因此有丰富的社区支持和文档资料可供参考。 Vite: - 极速开发:Vite使用ES模块的开发服务器和即时编译机制,启动速度快,冷启动时间短,能够提供更快的开发体验。 - 原生ES模块支持:Vite利用浏览器的原生ES模块支持,无需打包和转换,能够直接在浏览器中运行和调试代码,提高开发效率。 - 插件生态系统:Vite支持丰富的插件系统,可以轻松集成各种功能和工具,如TypeScript、CSS预处理器等。 缺点: npx create-react-app: - 一体化配置:create-react-app的配置相对固定,对于一些高度定制化的需求可能不够灵活,需要手动eject来获得更多配置项的控制权。 - 较大的初始包体积:create-react-app默认集成了许多工具和库,导致初始包体积较大,对于需要快速加载的项目可能不太合适。 Vite: - 生态系统相对较新:相比create-react-appVite的生态系统相对较新,可能在某些功能或插件的支持上不如create-react-app成熟。 - 配置复杂性:Vite相对于传统的打包工具(如Webpack)来说,配置相对简单,但对于不熟悉ES模块化和Vite特有的配置项的开发者来说,上手可能需要一些时间。 综上所述,npx create-react-app适合快速搭建React项目,并且拥有完善的生态系统和社区支持。Vite适合追求极速开发体验、原生ES模块支持和插件生态系统的开发者。选择使用哪种工具取决于项目需求、开发经验和个人偏好。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值