Вы стремитесь улучшить синтаксис JavaScript?
Хотите сделать свой код более последовательным?
Вы устали от уродливых шаблонов импорта, подобных этому, засоряющих вашу кодовую базу?

Import Homer from "../../../../../../Components/Simpsons/Homer"
Import {Marge} from "../../../../../../Components/Simpsons"

Когда вы могли бы вместо этого добавить что-то более простое и более легкое для чтения?

Import Homer from "@Simpsons/Homer"
Import {Marge} from "@Simpsons"

Это называется «Разрешение/отображение модуля», и, к счастью, его довольно просто настроить! В приведенных ниже примерах есть ссылки на документы, если вы хотите понять их глубже.

Начиная

В зависимости от ваших инструментов вам могут понадобиться разные/конкретные конфигурации, но вот основы:

Машинопись, Next и Angular

Файл: tsconfig.json (или то, что вы используете для своей конфигурации TS)
Typescript Docs: link
Next Docs: link
Angular Docs: link

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@Simpsons/*": ["/path/to/Components/Simpsons/*"]
    }
  }
}

Шутка

Файл: .jest.config
Документы: ссылка

moduleNameMapper: {
  // existing module maps
  "^@Simpsons/(.*)$": "<rootDir>/path/to/Components/Simpsons/$1"
}

Гэтсби

Аддон: gatsby-plugin-root-import (npm)
Файл: gatsby-config.js
Документы: ссылка

{
  resolve: "gatsby-plugin-root-import",
  options: {
    "@Simpsons": '/path/to/Components/Simpsons'
  }
}

Вебпак

Файл: webpack.config.js
Документы: ссылка

module.exports = {
  resolve: {
    alias: {
      "@Simpsons": path.resolve(__dirname, "/path/to/Components/Simpsons"),
    },
  },
};

сборник рассказов

Обновлять:

Storybook включил это в свою документацию.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

До:

Файл: main.js — NB: это часть конфигурации Webpack для Storybook, и документы такие же, как и выше
Документы: ссылка (для Storybook и Webpack)

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@Simpsons": path.resolve(__dirname, "/path/to/Components/Simpsons"),
    };
    return config;
  },
};

Ваши конфиги могут нуждаться в некоторой настройке выше, но, надеюсь, это поможет вам двигаться в правильном направлении!