react app rewrited替代品craco使用示例

时间:2022-11-08 敲代码的彭于晏人气:0

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版本）

加载全部内容