使用customize-cra进行辅助配置

customize-cra功能库是react-app-rewired功能库最好的搭档，一般在安装react-app-rewired时会连同customize-cra一起安装。

npm install react-app-rewird customize-cra --save-dev
yarn add react-app-wired customize-cra --dev

customize-cra的主要目标是帮助react-app-rewired更改其config-overrides.js配置文件。当使用customize-cra之后，config-overrides.js中导出的内容将不再是一个函数，而是导出函数override()的调用结果。这里给出一个示例配置。

const { override, disableEsLint, addBundleVisualizer } = require('customize-cra');

module.exports = override(disableEsLint(), process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer());

函数overrides()接受若干表达式作为参数，其中所使用的参数一般都由customize-cra提供。常用的主要有以下这些。

  • addTslineLoader(loaderOptions)，添加TSLint支持，需要安装tslint-loader。
  • addExternalBabelPlugin(plugins)，添加目录node_modules之外的 Babel 插件。
  • addBabelPlugin(plugins)，添加项目中已经安装的Babel插件。
  • addBabelPresets(...presets)，添加项目中已经安装的Babel Preset。
  • babelInclude(includes)，重写babel-loader的include选项。
  • babelExclude(excludes)，重写babel-loader的exclude选项。
  • fixBabelImports(libraryName, options)，添加babel-plugin-import插件支持，并配置指定库。
  • addDecoratorsLegacy()，使用传统模式支持修饰器，需要安装@babel/plugin-proposal-decorators。
  • disableEsLint()，关闭ESLint支持。
  • useEslintRc(configFile)，指定要使用的.eslintrc文件。
  • enableEslintTypescrit()，允许eslint-loader检查Typescript文件。
  • addWebpackAlias(alias)，向Webpack配置的别名区域增加别名设置。
  • addWebpackResolve(resolve)，向Webpack的依赖提供区域增加依赖解析。
  • addWebpackPlugin(plugin)，向Webpack增加插件。
  • addWebpackExternals(deps)，增加额外的依赖，通常用来使用CDN功能。
  • addWebpackModuleRule(rule)，向Webpack的module.rules部分增加规则设置。
  • addWebpackTarget(target)，向Webpack增加编译目标。
  • addBundleVisualizer(options, behindFlag=false)，增加Bundle Visualizer插件支持，需要安装webpack-bundle-analyzer。
  • useBabelRc()，指定使用.babelrc或者.babelrc.js文件来控制Babel配置。
  • adjustWorkbox(fn)，调整Wrokbox配置。
  • addLessLoader(loaderOptions)，增加Less支持，需要安装less和less-loader。
  • addPostcssPlugins([plugins])，增加Post-CSS插件。
  • disbaleChunk()，关闭编译文件分段功能。
  • removeModuleScopePlugin()，移除用于防止从src目录之外应用模块的CRA插件。在源码目录不是src是使用。
  • watchAll()，指示CRA监控所有项目文件，包括node_modules中的文件。与参数--watch-all功能相同。

除了可以调整Wepack的设置以外，customize-cra还可以调整Webpack DevServer的设置，这需要引入overrideDevServer。以下给出一个同时覆盖Webpack和Webpack DevServer的配置。

const { override, disableEsLint, overrideDevServer, watchAll } = require('customize-cra');

module.exports = {
  webpack: override(disableEsLint()),
  devServer: overrideDevServer(watchAll())
};

从以上示例可以看出，若要覆盖Webpack的配置，需要在覆盖配置文件中导出以webpack为键名的覆盖配置；要覆盖Webpack DevServer的配置，则需要导出以devServer为键名的覆盖配置，这与react-app-rewired中的配置方法是一致的。

Tip

事实上，customize-cra的配置方法是基于react-app-rewired的。

如果需要使用customize-cra以外的配置功能，可以自定义配置函数。配置函数需要返回一个接受目前config作为参数，并返回完成配置之后的config的函数。以下以addWebpackAlias()的源码为例来展示自定义配置函数的写法。

export const addWebpackAlias = alias => config => {
  if (!config.resolve) {
    config.resolve = {};
  }
  if (!config.resolve.alias) {
    config.resolve.alias = {};
  }
  Object.assign(config.resolve.alias, alias);
  return config;
};