react app rewrited替代品craco使用示例

目录
  • 1. 不使用custom-cra的原因
  • 2. craco基本使用
  • 3. 使用craco修改antd主题
  • 4. 别名
  • 5. babel扩展
  • 6. 分包
  • 7. 配置代理
  • 8. 最后

1. 不使用custom-cra的原因

custom-cra,react-app-rewiredcraco 都是用来无 eject 重写 CRA 配置

custom-cra上次更新在两年前,有些配置跟不上新的版本,例如使用webpack5配置less会出错, 虽说目前有了解决方案引入新包customize-cra-less-loader,但是随着webpack5的广泛使用,越来越多的问题暴露了出来,因此在未来版本中寻找替代方案是非常有必要的

2. craco基本使用

安装依赖yarn add @craco/craco

修改 pacage.json 中的命令,将react-app-rewired改为craco

{
  "scripts":{
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

在根目录创建 craco.config.js 配置文件

/* craco.config.js */
module.exports = {
  webpack: {},
  babel: {},
}

craco 更多配置

3. 使用craco修改antd主题

安装依赖 yarn add craco-less

/* craco.config.js */
const CracoLessPlugin = require('craco-less');
module.exports = {
  webpack: {},
  babel: {},
  //配置craco提供的plugin
  plugins: [
        {   // 修改antd主题
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        math: 'always',
                        modifyVars: {
                            '@primary-color': '#1890ff', //主题颜色
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
}

4. 别名

在webpack.alias中配置别名

/* craco.config.js */
const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
      '@moduleIcon': path.resolve(__dirname, '../src/assets/images/moduleIcon'),
      '@pages': path.resolve(__dirname, '../src/pages'),
    },
  },
  babel: {},
  plugins: [],
};

5. babel扩展

  • lodash按需打包

新建addBabelPlugins.js

const addBabelPlugins = () => {
  const configs = [
    ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
  ];
  return configs;
};
module.exports = addBabelPlugins;

在babel.plugins中配置babel扩展

/* craco.config.js */
const addBabelPlugins = require('./addBabelPlugins.js');
module.exports = {
  webpack: {
    alias: {},
  },
  babel: {
    plugins: addBabelPlugins(),
  },
  plugins: [],
};
  • 按环境引入扩展

修改addBabelPlugins.js

const addBabelPlugins = () => {
  const configs = [
    ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
  ];
  if (process.env.NODE_ENV !== 'development') {
    configs.push(['babel-plugin-transform-remove-console', { exclude: ['error', 'warn'] }]);
  }
  return configs;
};
module.exports = addBabelPlugins;

之所以使用函数的方式引入扩展,主要是为了方便在函数中进行环境的判断等操作,也可以使用craco自带的whenDev等函数进行环境判断,比如:

const { whenDev } = require("@craco/craco");
module.exports = {
    webpack: {
        //配置webpack的plugin
        plugins: [
            new ConfigWebpackPlugin(),
            ...whenDev(() => [new CircularDependencyPlugin()], [])
        ]
    }
};

6. 分包

新建addSplitChunks.js

const addSplitChunks = () => {
  if (process.env.NODE_ENV !== 'development') {
    return {
      chunks: 'all',
      minSize: 30000,
      name: false,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      cacheGroups: {
        'echarts.vendor': {
          name: 'echarts.vendor',
          priority: 40,
          test: /[\\/]node_modules[\\/](echarts|zrender)[\\/]/,
          chunks: 'all',
        },
        'async-common': {
          chunks: 'async',
          minChunks: 2,
          name: 'async-commons',
          priority: 30,
        },
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2,
          priority: 20,
        },
      },
    };
  }
  return {};
};
module.exports = addSplitChunks;

修改craco.config.js

const addSplitChunks = require('./addSplitChunks.js');
module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      webpackConfig.optimization.splitChunks = addSplitChunks();
      return webpackConfig;
    },
  },
};

在webpack.configure中可以配置任何webpack的配置

7. 配置代理

/* craco.config.js */
module.exports = {
  devServer: {
    port: 9000,
    proxy: {
      "/juhe": {
        target: "http://v.juhe.cn",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/juhe": "",
        },
      },
    },
  },
};

secure:默认情况下,将不接受在HTTPS上运行且证书无效的后端服务。如有需要将secure设为false

changeOrigin:默认情况下,代理时会保留主机头的来源,可以将changeOrigin设为true覆盖此行为

8. 最后

如果不清楚webpack5的配置,可参考我的另一篇文章webpack5详细教程(5.68.0版本)

以上就是react app rewrited替代品craco使用示例的详细内容,更多关于craco替代react app rewrited的资料请关注我们其它相关文章!

(0)

相关推荐

  • React Refs 的使用forwardRef 源码示例解析

    目录 三种使用方式 1. String Refs 2. 回调 Refs 3. createRef 两种使用目的 Refs 转发 createRef 源码 forwardRef 源码 三种使用方式 React 提供了 Refs,帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素. React 提供了三种使用 Ref 的方式: 1. String Refs class App extends React.Component { constructor(props) { su

  • React元素与组件的区别示例详解

    目录 从问题出发 元素与组件 元素 组件 问题如何解决 自定义内容 第一种实现方式 第二种实现方式 第三种实现方式 从问题出发 我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div

  • React竞态条件Race Condition实例详解

    目录 竞态条件 React 与竞态条件 效果演示 问题复现 布尔值解决 useRequest 解决 Suspense 竞态条件 Race Condition,中文译为竞态条件,旨在描述一个系统或者进程的输出,依赖于不受控制事件的出现顺序或者出现时机. 举个简单的例子: if (x == 5) // The "Check" { y = x * 2; // The "Act" // 如果其他的线程在 "if (x == 5)" and "y

  • React Context 变迁及背后实现原理详解

    目录 Context 老的 Context API 基础示例 context 中断问题 解决方案 新的 Context API 基础示例 模拟实现 createContext 源码 Context 本篇我们讲 Context,Context 可以实现跨组件传递数据,大部分的时候并无需要,但有的时候,比如用户设置 了 UI 主题.地区偏好,如果从顶层一层层往下传反而有些麻烦,不如直接借助 Context 实现数据传递. 老的 Context API 基础示例 在讲最新的 API 前,我们先回顾下老

  • concent渐进式重构react应用使用详解

    目录 正文 需求来了 准备工作 UI 实现 消灭生命周期函数 提升状态到store 解耦业务逻辑与UI 爱class,爱hook,让两者和谐共处 使用组件 结语 正文 传统的redux项目里,我们写在reducer里的状态一定是要打通到store的,我们一开始就要规划好state.reducer等定义,有没有什么方法,既能够快速享受ui与逻辑分离的福利,又不需要照本宣科的从条条框框开始呢?本文从普通的react写法开始,当你一个收到一个需求后,脑海里有了组件大致的接口定义,然后丝滑般的接入到co

  • react app rewrited替代品craco使用示例

    目录 1. 不使用custom-cra的原因 2. craco基本使用 3. 使用craco修改antd主题 4. 别名 5. babel扩展 6. 分包 7. 配置代理 8. 最后 1. 不使用custom-cra的原因 custom-cra,react-app-rewired 与 craco 都是用来无 eject 重写 CRA 配置 custom-cra上次更新在两年前,有些配置跟不上新的版本,例如使用webpack5配置less会出错, 虽说目前有了解决方案引入新包customize-c

  • 在Create React App中启用Sass和Less的方法示例

    关于创建 create-react-app 项目请查看:create-react-app 的安装与创建 . 关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules,请查看我的上一篇文章: 在 Create React App 中使用 CSS Modules . 启用 Sass 语法编写 CSS create-react-app 脚手架中已经添加了 sass-loader 的支持,所以只需要安装 node-sass 插件即可 安装 node-sass

  • React大屏可视化脚手架教程示例

    目录 使用 create-react-app 初始化 引入 antd UI库 使用 craco 插件来自定义配置 自定义 antd 主题,使用 less 作为 css 预处理器 修改 craco.config.js 文件 craco-less .module.less 模拟vue组件中style的scope 功能 配置 craco.config.js 文件 以上操作版本记录 使用 create-react-app 初始化 # 使用了 create-react-app 的 typescript 模

  • React 状态管理工具优劣势示例分析

    目录 什么是状态管理? React 状态管理方案 方案介绍 方案对比 Source 相关建议 什么是状态管理? “状态”是描述应用程序当前行为的任何数据.这可能包括诸如“从服务器获取的对象列表”.“当前选择的项目”.“当前登录用户的名称”和“此模式是否打开?”等值. 众所周知,我们在研发一个复杂应用的过程中,一套好的状态管理方案是必不可少的,既能提升研发效率,又能降低研发维护成本,那么状态管理方案那么多,它们有什么不同,我们又该如何选择适合当前应用的方案呢? 本期将主要就 react 的常用状态

  • React 实现拖拽功能的示例代码

    本文介绍了React 实现拖拽功能的示例代码,分享给大家,具体如下: 实现效果: 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感觉有点麻烦,而且没必要.感觉相关的博文好少的,大部分都是直接上代码,没有解释. 图片默认可以拖动,其他元素的拖动效果同图片.正常的 div 是不能被拖动的,鼠标点击选择后移动没有效果,需要加  draggable="true" 使得元素可以被拖动. 拖拽相关的几个事件,有被拖动元素的事件,也有拖动进入的

  • react显示文件上传进度的示例

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 在使用react, vue框架的时候, 如果需要监听文件上传可以使用axios里的onUploadProgress. react上传文件显示进度 demo 前端 快速安装react应用 确保有node环境 npx create-react-app my-app //当前文件夹创建my-app文件 cd my-app //进入目录 npm install antd //安装antd UI组件 npm

  • react实现浏览器自动刷新的示例代码

    在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂.想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理还是比较简单的.本文针对前端路由主流的实现方式 hash 和 history,提供了原生JS/React/Vue 共计六个版本供参考,每个版本的实现代码约 25~40 行左右(含空行). 什么是前端路由? 路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系. 在 Web

  • React特征学习之Form格式示例详解

    目录 Form 样式 React hook Form 样式 首先来看一个简单Form, 式样如下 import * as React from 'react'; const LoginForm = () => { return ( <form> <div> // Notice: 这里要用htmlFor,相当于id <label htmlFor="email">Email</label> <input id="emai

  • React.memo函数中的参数示例详解

    目录 React.memo?这是个啥? React.memo的第一个参数 父组件 子组件 React.memo优化 React.memo的第二个参数 父组件 子组件 React.memo优化 父组件 子组件 小结 React.memo?这是个啥? 按照官方文档的解释: 如果你的函数组件在给定相同 props 的情况下渲染相同的结果,那么你可以通过将其包装在 React.memo 中调用,以此通过记忆组件渲染结果的方式来提高组件的性能表现.这意味着在这种情况下,React 将跳过渲染组件的操作并直

  • React 错误边界Error Boundary使用示例解析

    目录 我们为什么需要错误边界 如何使用错误边界组件 使用错误边界需要注意什么 我们为什么需要错误边界 在React组件中可能会由于某些JavaScript错误,导致一些无法追踪的错误,导致应用崩溃.部分 UI 的 JavaScript 错误不应该导致整个应用崩溃.为此,React引入了错误边界(Error Boundary)的概念:可以捕获发生在其子组件树任何位置的 JavaScript 错误,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树. 而在React16以后,未捕

随机推荐