config-overrides.js cheat sheet

config-overrides.js

const { override,
        disableEsLint,
        addDecoratorsLegacy,
        addBabelPlugins,
        fixBabelImports,
        addWebpackAlias,
        babelInclude,
        fixBabelImports,
       removeModuleScopePlugin,
       useEslintRc,
       addWebpackExternals
} = require('customize-cra');

const path = require("path");
const fs = require("fs");
const webpack = require("webpack");

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [resolveApp("src"), resolveApp("../components/src")];

module.exports = override(
  useEslintRc('.eslintrc.js'),
  fixBabelImports("module-resolver", {
    alias: {
      "^react-native$": "react-native-web"
    }
  }),
  addDecoratorsLegacy(),
  ...addBabelPlugins(
        'react-require', // jsx 文件自动 import React
        'lodash', // lodash 按需加载
        ['import', {libraryName: 'antd', style: true}], // antd 按需加载
        /* Experimental Plugins */
        '@babel/plugin-proposal-class-properties', // class Anonymous { name = 'unknow' }
        ['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true}], // @debounce()
        '@babel/plugin-proposal-do-expressions', // do {}
        '@babel/plugin-proposal-export-default-from', // export v from 'mod';
        '@babel/plugin-proposal-export-namespace-from', // export * as ns from 'mod';
        '@babel/plugin-proposal-function-bind', // obj::func
        '@babel/plugin-proposal-function-sent', // function.sent
        '@babel/plugin-proposal-logical-assignment-operators', // a ||= b;
        '@babel/plugin-proposal-nullish-coalescing-operator', // const foo = object.foo ?? "default";
        '@babel/plugin-proposal-numeric-separator', // const budget = 1_000_000_000_000;
        '@babel/plugin-proposal-optional-chaining', // const baz = obj?.foo?.bar?.baz;
        // buggy '@babel/plugin-proposal-partial-application', // const addOne = addTwo(1, ?);
        ['@babel/plugin-proposal-pipeline-operator', {'proposal': 'minimal'}], // value |> func | console.log
        '@babel/plugin-proposal-private-methods', // class Anonymous { #age = 18 }
        '@babel/plugin-proposal-throw-expressions' // param === true || throw new Error('Falsey!');
  ),
  disableEsLint(),
  addWebpackAlias({
    "@": path.resolve(__dirname, "src"),
    "react-native": "react-native-web",
    "react-native-svg": "svgs", // not necessary unless you wanted to do this
    shared: fs.realpathSync("../shared")
  }),
  addWebpackExternals({
    react: "React",
    "react-dom": "ReactDom"
  });
  babelInclude([
    path.resolve("src"), // make sure you link your own source
    // any react-native modules you need babel to compile
    path.resolve("node_modules/react-native-gesture-handler"),
  ]),
  removeModuleScopePlugin(), // to see outside root directory
);