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 = () =&gt; {
  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 forwardRef的使用方法及注意点
React.forwardRef的API中ref必须指向dom元素而不是React组件，通过一段示例代码给大家介绍了React forwardRef使用方法及注意点还有一些特殊情况分析，感兴趣的朋友跟随小编一起看看吧
2021-06-06
React倒计时功能实现代码——解耦通用
这篇文章主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
基于React.js实现简单的文字跑马灯效果
刚好手上有一个要实现文字跑马灯的react项目，然后ant-design上面没有这个组件，于是只能自己手撸一个，文中的实现方法讲解详细，希望对大家有所帮助
2023-01-01
教你如何实现在react项目中嵌入Blazor
这篇文章主要介绍了如何实现在react现有项目中嵌入Blazor,通过这个案例我们可以知道 blazor也可以像react那样嵌入在任何的现有项目中，并且使用方便，需要的朋友可以参考下
2023-01-01
使用useImperativeHandle时父组件第一次没拿到子组件的问题
这篇文章主要介绍了使用useImperativeHandle时父组件第一次没拿到子组件的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
react实现动态表单
这篇文章主要为大家详细介绍了react实现动态表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
React+Electron快速创建并打包成桌面应用的实例代码
这篇文章主要介绍了React+Electron快速创建并打包成桌面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
React使用TailwindCSS的实现示例
TailwindCSS是一个实用优先的CSS框架,本文主要介绍了React使用TailwindCSS的实现示例,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
React使用高阶组件与Hooks实现权限拦截教程详细分析
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧
2023-01-01
React父组件调用子组件中的方法实例详解
最近做一个React项目,所有组件都使用了函数式组件,遇到一个父组件调用子组件方法的问题,下面这篇文章主要给大家介绍了关于React父组件调用子组件中方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07