ReactCraco詳解

ReactCraco是一個可以輕鬆定製create-react-app配置的工具，它可以使開發人員更容易地在create-react-app啟動器上添加自定義配置並刪除它們。

一、安裝與配置

要使用ReactCraco，需要先安裝它:

npm install @craco/craco --save-dev

然後，通過使用“craco”而不是“react-scripts”腳本運行create-react-app啟動器:

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

有許多預設配置，可以通過在根目錄下創建craco.config.js文件並導出要使用的配置來使用它們。

例如，要在React項目中使用TailwindCSS，只需在這個配置文件中添加以下代碼片段:

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss')
      ],
    },
  },
};

這將確保Create-react-app使用Tailwind CSS。

二、自定義配置規則

ReactCraco具有許多默認配置，但是在有時會遇到需要自定義配置的情況。

舉個例子，如果想在服務器端渲染React應用程序時，在Webpack配置中添加一些特定於Node.js的選項，那麼可以在craco.config.js配置文件中包括這些選項。

可以在此文件中的webpack配置對象中添加選項

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      if (env === 'production') {
        webpackConfig.optimization.splitChunks = false;
      }
      return webpackConfig;
    },
    plugins: {
      add: [
        // Add plugins here
      ],
      remove: [],
    },
  },
};

這個例子演示了如何在生產環境下禁用代碼分離，這是一種優化生產打包的選項。也可以添加和刪除其他插件。

三、環境變量

ReactCraco提供了指定環境變量的方法，這些變量可以在應用程序中使用。可以使用.env文件或在終端或CI / CD過程中設置變量。

例如，有兩個環境變量API_HOST和API_PORT可以在React應用程序中使用。可以通過設置以下文件來設置它們:

API_HOST=example.com
API_PORT=8080

然後在應用程序代碼中訪問環境變量:

const apiUrl = `${process.env.API_HOST}:${process.env.API_PORT}`;

注意，React應用程序中的.env文件中既可以包含公共變量，也可以包含區分環境的變量等。

四、擴展腳本配置

在創建React應用程序時，可以使用create-react-app CLI實用程序使用命令行選項來修改某些配置。類似地，ReactCraco允許用戶通過描述使用哪些攔截器來擴展內部系列腳本。

下面是一個使用路徑別名的示例:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  jest: {
    configure: (jestConfig, { env, paths }) => {
      jestConfig.moduleNameMapper['^@(.*)$'] = '/src$1';

      return jestConfig;
    },
  },
};

上面的例子演示了如何用@來代替src。在webpack和Jest配置中使用路徑別名。

總結

ReactCraco可以讓開發人員在create-react-app啟動器的基礎上添加自定義配置，其配置方法簡單，容易上手，對於定製化項目有很大的幫助。