react中使用craco自定义配置

这篇具有很好参考价值的文章主要介绍了react中使用craco自定义配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用create-react-app创建项目时,默认情况下webpack的配置是隐藏的,你可以使用eject将所有的配置暴露出来,但你一旦这么做了,是无法撤销的,这是一个不可逆的操作。当然,如果你已经对webpack特别熟练了就另当别论了。下文是在不暴露配置的情况下,实现配置的自定义,使用的是craco包。

1、安装craco

npm i @craco/craco
// or
yarn add @craco/craco

2、修改package.json的scripts属性

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3、在项目根目录创建一个 craco.config.js 用于修改默认配置。

/* craco.config.js */
module.exports = {
  // ...
};

至此就结束了,小伙伴们有更好的方式欢迎在评论区交流学习文章来源地址https://www.toymoban.com/news/detail-759552.html

到了这里,关于react中使用craco自定义配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 简介:在这篇教程中,我们将使用React.js框架创建一个简单的聊天机器人的前端界面,并利用Dialogflo

    作者:禅与计算机程序设计艺术 介绍及动机 聊天机器人(Chatbot)一直是互联网领域中的热门话题。而很多聊天机器人的功能都依赖于人工智能(AI)技术。越来越多的企业希望拥有自己的聊天机器人系统,从而提升自己的竞争力。为此,业界也出现了很多基于开源技术或云

    2024年02月06日
    浏览(57)
  • React 安装使用 Less(详细流程,包含 webpack、craco 方式)

    React 项目开发中可能会使用到 Less 、 Sass 等样式预处理器, create-react-app 创建的 React 项目,默认就是支持 Sass 的。如果需要使用 Less 则需要额外手动安装配置。 由于需要暴露隐藏的配置文件,不利于项目升级,不推荐使用。 安装 less 与 less-loader 暴露 webpack 配置文件。(提示

    2024年02月09日
    浏览(40)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(91)
  • React Swiper.js使用(详细版)3D聚焦特效,自定义导航按钮等

    共用代码 普通版本 重点:  modules={[Navigation, Pagination]}   Swiper, SwiperSlide  没什么好说的 自定义导航按钮 / 进度条 + 解决同一页面,多个swiper.js 导航切换按钮冲突问题 这里的重点是:  1、 通过直接引入less文件 重新定义 swiper-button-prev等类 或 :global ,自定义导航按钮 / 进

    2024年02月07日
    浏览(79)
  • amis百度前端框架,在js中使用amis写json转页面

    1.在项目中使用百度 amis 的sdk做开发库。 2。加载sdk中的库: 3.创建一个主页面(代码片段里面重要是创建了一个div元素, 这个不重要 ): 代码中主要用了custom组件,在这个组件中可以写js,通过js创建 一个div元素;

    2024年02月13日
    浏览(43)
  • 【React | 前端】在React的前端页面中,判断某个变量值是否被定义?根据是否定义显示不同的内容?

    在React的前端页面中,判断某个变量值是否被定义?根据是否定义显示不同的内容? 假如,现在有一个需求是设计一个新功能,新功能中要求新增一个之前没有的变量,假设是计算某一个数组的长度或者统计某个事情的总数。 场景是历史任务中并没有计算该数值,新的任务需

    2024年02月13日
    浏览(49)
  • 前端框架学习-React(一)

    React 应用程序是由 组件 组成的。 react 程序是用的jsx语法,使用这种语法的代码需要由babel进行解析,解析成js代码。 jsx语法: 只能返回一个根元素 所有的标签都必须闭合(自闭和或使用一对标签的方式闭合) 使用驼峰式命名法给大部分属性命名如:className 大写字母开头的

    2024年02月12日
    浏览(40)
  • 使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便

    Vite官方网站:Vite | 下一代的前端工具链  Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快。  兼容性注意 Vite 需要 Node.js 版本 14.18+,16+。然

    2024年02月14日
    浏览(51)
  • 前端框架 Nextjs React 部署

    目录 一、node环境部署 二、静态导出 补充:路由问题 Nextjs打包还是非常方便的,就是网上资料不太全,导致踩了一些坑,下面是我亲自实践的两种打包方式。 一、node环境部署 这种方式最简单,也比较不容易出错,但部署时服务器需安装有node环境,速度没话说,杠杠的! 构

    2024年02月12日
    浏览(42)
  • react js自定义实现状态管理

    和源码可能不同,我没看过源码,只是实现一下 不足的是,还是需要forceUpdate 实现模块化

    2024年01月18日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包