【pathを短く】config-overrides.jsに感動した話

経緯

いつも通り一人寂しく開発をしていたところ、超便利な機能を見つけてしまった。
その名もconfig-overrides.js。もうpathに悩まなくて済む！
今後は愛用していきたい。

導入

なにはともあれyarn

yarn add react-app-rewired --dev

Directory直下にconfig-overrides.jsを作成。

const path = require('path');
const { useBabelRc, override, addWebpackAlias } = require('customize-cra');

module.exports = override(useBabelRc(), addWebpackAlias({
  'components': path.resolve(__dirname, 'src/app/components'),
  'constants': path.resolve(__dirname, 'src/app/constants'),
  'pages': path.resolve(__dirname, 'src/app/pages'),
  'routes': path.resolve(__dirname, 'src/app/routes'),
  'utils': path.resolve(__dirname, 'src/app/utils'),
  'styles': path.resolve(__dirname, 'src/app/styles'),
}));

package.jsonのscriptsも修正。

 "scripts": {
    "start": "react-app-rewired start",
    ....
    },
    ....

本来であれば相対パスやらで書かなくてはいけないところ、下記のように短縮できる。

import CustomDatePicker from 'components/common/DatePicker/DatePicker';