Tracardi / tracardi-gui

Tracardi ReactJs Graphical User Interface
Other
19 stars 25 forks source link

[Suggestion]Add path alias #253

Open ryomahan opened 1 year ago

ryomahan commented 1 year ago

@atompie

This just a suggestion.

use react-app-rewired and react-app-alias add path alias so we can:

import { getApiUrl, resetApiUrlConfig } from "@/remote_api/entrypoint"

Implementation method

1. install lib

yarn add -D react-app-rewired react-app-alias

2. add config file on project's root path

// jsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@misc/*": ["src/misc/*"],
      "@store/*": ["src/redux/reducers/*"],
      "@components/*": ["src/components/*"]
    }
  }
}
// config-overrides.js
const { aliasWebpack, aliasJest } = require("react-app-alias")

const options = {}

module.exports = aliasWebpack(options)
module.exports.jest = aliasJest(options)
// any_name_you_want.js
// this file is used to add path alias for the IDE WebStorm
System.config({
  "paths": {
    "@/*": "src/*",
    "@misc/*": "src/misc/*",
    "@store/*": "src/redux/reducers/*",
    "@components/*": "src/components/*",
  }
})

3. change package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  }

4. modify the previous code

And react-app-rewired allows us to freely modify porject's config file without eject