импорт компонентов с помощью ~ вместо './'

#javascript #reactjs #typescript #react-native #webpack

#javascript #reactjs #typescript #реагировать — родной #webpack

Вопрос:

В моей папке pages / screens я создал индексный файл и сделал что-то вроде этого:

 export * from './UserPage';
export * from './users/SearchPage';

Итак, теперь, когда я хочу импортировать компоненты с этих страниц в свой файл App.tsx, я могу просто

 import { SearchPage, NewPage } from './pages';

вместо ввода полного относительного пути. Тем не менее, я хочу использовать что-то вроде

 import { SearchPage, NewPage } from '~/pages';

Для этого я добавил это в свой tsconfig.json файл, поскольку это, казалось, работало в другом проекте, но здесь у меня это не работает:

     "paths": {
      "~/*": ["./*"],
      "~": ["./"]
    },

Как еще я могу изменить формат импорта?

Редактировать: tsconfig.json:

 {
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "./src",
    "paths": {
      "@modules/*": ["modules/*"],
      "@config/*": ["config/*"],
      "@shared/*": ["shared/*"]
    },
  },
  "include": [
    "src"
  ]
}

1. Зачем вам файлы пакетов в вашем домашнем каталоге? Почему вы хотите предоставить содержимое вашего домашнего каталога HTTP-запросам? Работает ли ваш веб-сервер под вашим личным пользователем? Это действительно странная вещь, которую нужно хотеть сделать…

2. это совсем не странная вещь, которую нужно хотеть сделать. тильда часто используется в путях импорта в качестве сокращения для корня проекта (или корневого каталога исходного кода).

Ответ №1:

Дважды проверьте, какое значение baseUrl находится в вашем файле tsconfig.json.

Любой загружаемый вами модуль, соответствующий этим путям, будет загружен относительно baseUrl .

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

1. Оказывается, я раньше не использовал baseUrl . Я добавил его в свой tsconfig вместе с путями. Теперь idk, как / где указать ~ ? Теперь, если я импортирую файл в App.tsx, я могу сделать это следующим import { HomePage } from 'pages'; образом, но не с ~ помощью, пожалуйста, смотрите Мой файл в обновленном qs.

Ответ №2:

Поскольку вы используете webpack с typescript, вам необходимо сообщить webpack, что вы используете функцию путей.

Вы можете сделать это с помощью tsconfig-paths-webpack-plugin

Ответ №3:

Вы можете определить по своему tsconfig.json усмотрению.

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "strictPropertyInitialization": false,
    "baseUrl": "./src",
    "allowJs": true,
    "paths": {
      "@modules/*": ["modules/*"],
      "@config/*": ["config/*"],
      "@shared/*": ["shared/*"]
    },
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

tsconfig.json Для вас в paths , вы можете сделать что-то вроде

 "paths": {
    "@pages/*": ["pages"],
}

Но вам нужно будет использовать import {...} from '@pages' ;

1. Вы хотели бы использовать import { HomePage } from 'pages' ?

2. Я уже это делаю. Я хочу сделать что-то вроде импорта из ‘~/ pages’

3. Итак, вы хотите импортировать все компоненты со страниц? Нравится import {HomePage, Home, SignUp } from '~/pages' ?

4. Страницы из '~/pages' , компоненты из '~/components' и т.д. Все эти папки находятся внутри src. Прямо сейчас я могу импортировать из './pages и './components'

5. Я предполагаю, что использование @ формата лучше. Но если вы хотите, попробуйте это "paths": { "~/*": ["./src/*"], "~": ["./"] },