Создайте собственный декоратор «@» для импорта модуля из его родительского каталога (ReactJs)

Question

Я бы хотел импортировать модуль из каталога, используя пользовательский декоратор / аннотацию, например, модуль @material-ui/core, как в примере ниже:

Вместо классического импорта

import class1 from '../../../../Services/module1';

Я хотел бы использовать этот синтаксис

import class1 from '@Services/module1';

Спасибо за вашу помощь!

Answer 1

Я должен удалить свой проект ReactionJs (созданный с помощью CRA) -> edit webpack.config.js -> Добавить псевдоним:

  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@pages': path.join(__dirname, '/src/pages'),
      '@components': path.join(__dirname, '/src/components'),
      '@assets': path.join(__dirname, '/src/assets'),
    },
  },

Answer 2

Я предлагаю использовать babel-plugin-module-resolver

Укажите плагин в вашем .babelrc с пользовательским корнем или псевдонимом.Вот пример:

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "~": "./app",
        "underscore": "lodash"
      }
    }]
  ]
}

Answer 3

В TS:

"paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"]
}

В параметрах компилятора в вашем файле tsconfig.json.

В веб-пакете: Как использовать путь ярлыка "@" в веб-пакете?