🎨 Support path alias

Detail see: facebook/create-react-app#5118

Author: MadratJerry

config-overrides.js

@@ -1,8 +1,13 @@
+const path = require('path')
 const RewireReactHotLoader = require('react-app-rewire-hot-loader')
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 module.exports = function override(config, env) {
   config = RewireReactHotLoader(config, env)
   config.plugins.push(new MonacoWebpackPlugin())
+  config.resolve = {
+    ...config.resolve,
+    alias: { '@': path.resolve(__dirname, 'src') },
+  }
   return config
 }

src/App.tsx

@@ -1,10 +1,10 @@
 import { hot } from 'react-hot-loader'
-import React, { ChangeEvent, useState } from 'react'
-import Editor, { Props as EditorProps } from './components/Editor'
-import Monarch from './lib/tokenizer'
-import Token from './lib/tokenizer/token'
-import simpleC from './lib/languages/simpleC'
-import NavagationButton from './components/NavagationButton'
+import React, { useState } from 'react'
+import Editor, { Props as EditorProps } from '@/components/Editor'
+import Monarch from '@/lib/tokenizer'
+import Token from '@/lib/tokenizer/token'
+import simpleC from '@/lib/languages/simpleC'
+import NavagationButton from '@/components/NavagationButton'
 
 const tokenizer = new Monarch(simpleC)
 const App = () => {

src/components/NavagationButton.tsx

@@ -5,8 +5,8 @@ import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import Grow from '@material-ui/core/Grow'
 import Paper from '@material-ui/core/Paper'
 import Popper from '@material-ui/core/Popper'
-import NavagationList from './NavigationList'
-import AnimateMenuIcon from './AnimateMenuIcon'
+import NavagationList from '@/components/NavigationList'
+import AnimateMenuIcon from '@/components/AnimateMenuIcon'
 
 const useStyles = makeStyles(theme => ({
   fab: { position: 'fixed', top: 8, left: 8, zIndex: 1 },

src/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './App'
-import * as serviceWorker from './serviceWorker'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { createMuiTheme } from '@material-ui/core/styles'
 import { ThemeProvider } from '@material-ui/styles'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
 import 'typeface-roboto'
 
 const theme = createMuiTheme({ typography: { useNextVariants: true } })

src/lib/languages/simpleC.ts

@@ -1,4 +1,4 @@
-import { IMonarchLanguage } from '../tokenizer/monarchTypes'
+import { IMonarchLanguage } from '@/lib/tokenizer/monarchTypes'
 
 // prettier-ignore
 const simpleC : IMonarchLanguage = {

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -21,5 +25,8 @@
     "suppressImplicitAnyIndexErrors": true,
     "jsx": "preserve"
   },
-  "include": ["src"]
+  "extends": "./tsconfig.paths.json",
+  "include": [
+    "src"
+  ]
 }

tsconfig.paths.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}