脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → craco替代react app rewrited

react app rewrited替代品craco使用示例

 更新时间：2022年11月07日 14:47:25   作者：敲代码的彭于晏  
这篇文章主要为大家介绍了react app rewrited替代品craco使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1. 不使用custom-cra的原因

custom-cra,react-app-rewired 与 craco 都是用来无 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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react-dnd实现任意拖动与互换位置

    react-dnd实现任意拖动与互换位置

    这篇文章主要为大家详细介绍了react-dnd实现任意拖动与互换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Component与PureComponent对比解析

    Component与PureComponent对比解析

    这篇文章主要为大家介绍了Component与PureComponent解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 一文详解React中如何实现组件懒加载

    一文详解React中如何实现组件懒加载

    懒加载是一种优化技术,旨在延迟加载不必要的资源,直到它们真正需要时再进行加载,那么React的懒加载是如何实现的呢,下面小编就来和大家详细讲讲吧
    2025-03-03
  • react结合bootstrap实现评论功能

    react结合bootstrap实现评论功能

    这篇文章主要为大家详细介绍了react结合bootstrap实现评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • React BootStrap用户体验框架快速上手

    React BootStrap用户体验框架快速上手

    这篇文章主要介绍了React BootStrap用户体验框架快速上手的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • ReactJS应用程序中设置Axios拦截器方法demo

    ReactJS应用程序中设置Axios拦截器方法demo

    这篇文章主要为大家介绍了ReactJS应用程序中设置Axios拦截器方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • react组件中过渡动画的问题解决

    react组件中过渡动画的问题解决

    这篇文章主要为大家介绍了react组件中过渡动画的问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • React实现路由鉴权的实例详解

    React实现路由鉴权的实例详解

    React应用中的路由鉴权是确保用户仅能访问其授权页面的方式,用于已登录或具有访问特定页面所需的权限,这篇文章就来记录下React实现路由鉴权的流程,需要的朋友可以参考下
    2024-07-07
  • react-router-dom5如何升级到6

    react-router-dom5如何升级到6

    这篇文章主要介绍了react-router-dom5如何升级到6问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React中this丢失的四种解决方法

    React中this丢失的四种解决方法

    这篇文章主要给大家介绍了关于React中this丢失的四种解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03

最新评论