快捷導(dǎo)航

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

更新時(shí)間：2022年11月07日 14:47:25 作者：敲代碼的彭于晏

這篇文章主要為大家介紹了react?app?rewrited替代品craco使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 不使用custom-cra的原因

custom-cra,react-app-rewired 與 craco 都是用來(lái)無(wú) eject 重寫 CRA 配置

custom-cra上次更新在兩年前，有些配置跟不上新的版本，例如使用webpack5配置less會(huì)出錯(cuò)，雖說(shuō)目前有了解決方案引入新包customize-cra-less-loader，但是隨著webpack5的廣泛使用，越來(lái)越多的問題暴露了出來(lái)，因此在未來(lái)版本中尋找替代方案是非常有必要的

2. craco基本使用

安裝依賴yarn add @craco/craco

修改 pacage.json 中的命令，將react-app-rewired改為craco

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

在根目錄創(chuàng)建 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擴(kuò)展

lodash按需打包

新建addBabelPlugins.js

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

在babel.plugins中配置babel擴(kuò)展

/* craco.config.js */
const addBabelPlugins = require('./addBabelPlugins.js');
module.exports = {
  webpack: {
    alias: {},
  },
  babel: {
    plugins: addBabelPlugins(),
  },
  plugins: [],
};

按環(huán)境引入擴(kuò)展

修改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;

之所以使用函數(shù)的方式引入擴(kuò)展，主要是為了方便在函數(shù)中進(jìn)行環(huán)境的判斷等操作，也可以使用craco自帶的whenDev等函數(shù)進(jìn)行環(huán)境判斷，比如：

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：默認(rèn)情況下，將不接受在HTTPS上運(yùn)行且證書無(wú)效的后端服務(wù)。如有需要將secure設(shè)為false

changeOrigin：默認(rèn)情況下，代理時(shí)會(huì)保留主機(jī)頭的來(lái)源，可以將changeOrigin設(shè)為true覆蓋此行為