Код VS: «Не удается найти модуль» из корневого пути - PullRequest
1 голос
/ 08 марта 2019

Я не могу решить проблему импорта модуля с помощью кода Visual Studio:

Cannot find module

У меня есть пример репо в иллюстрируйте эту проблему с помощью структуры каталогов, подобной этой:

➜ tree -I node_modules
.
├── README.md
├── packages
│   ├── jsx
│   │   └── jsx.jsx
│   ├── tjs
│   │   └── tjs.js
│   ├── tscript
│   │   └── tscript.js
│   └── tsx
│       └── tsx.tsx
├── src
│   ├── entry.ts
│   └── localjs.js
└── tsconfig.json

Я бы хотел, чтобы эта настройка работала с babel-typcript , но мое исследование показало, что проблемаКажется, что это присуще VSCode, поэтому я оставил его вне образца.

Я перепробовал все перестановки paths для tsconfig.json, которые я видел, т.е.

    "paths": {
      "*": [
        "*",
        "packages/*",
        "packages/*/index.tsx",
        "packages/*/index.jsx",
        "packages/*/index.js"
      ],
      "$1": [
        "packages/$1/$1"
      ],
      "~/*": [
        "packages/*"
      ],
      "~/$1": [
        "packages/$1/$1"
      ],
      "*/$1": [
        "*/$1/$1",
        "packages/$1/$1",
        "*/packages/$1/$1"
      ]
    }

Справочник не дает особого понимания.

Ответы [ 2 ]

2 голосов
/ 09 марта 2019

Часть проблемы с вашим текущим tsconfig.json заключается в том, что вы используете include: [], поэтому никакой код не будет соответствовать вашей конфигурации!

Я не смог найти никаких примеров использования шаблона $1, как у вас, в вашем примере конфигурации, и я не думаю, что то, что вы пытаетесь сделать, возможно, основываясь на некоторых исследованиях (см. Также: # 5039 ). Вы можете переименовать {package}/{package}.jsx в {package}/index.jsx? Тогда ваш конфиг путей может быть тривиально изменен на:

    "paths": {
      "*": ["*", "packages/*"]
    },
1 голос
/ 10 марта 2019

Вы уже получили ответ от Wex , предлагающий переименовать ваши файлы, чтобы иметь базовое имя index плюс соответствующее расширение и использовать сопоставление "*"*: ["*", "packages/*"]. Вы упомянули в комментарии, что вам лучше избегать переименования файлов. Помимо того, что я избегаю переименований, я не фанат, чтобы многие файлы назывались index.<some_extension>. При работе мои глаза, естественно, обращают внимание на базовые имена файлов, над которыми я работаю или получаю отчеты. Необходимость различать файлы с почти одинаковыми базовыми именами по каталогам возможна, но с моей стороны требуется больше познавательной работы, чтобы отвести взгляд от базового имени и пути, или больше работы на клавиатуре для завершения. (На ввод текста уходит больше времени. IDE может оказать очень большую помощь.) Этого достаточно, чтобы раздражать.

Сначала давайте разберемся с тупиками. Я не вижу доказательств того, что ~ и $1 рассматриваются специально в paths. Я пошел, чтобы проверить код tsc и не увидел там ничего, что обрабатывает такие шаблоны. Может быть, я пропустил это, но я думаю, что они просто не особенные . Кроме того, игнорируя расширения на данный момент , желаемое сопоставление - это что-то packages/<package_name>/<package_name>.ext Имя пакета появляется дважды. Так что было бы заманчиво установить сопоставление, например "*": ["packages/*/*.ext"], но это явно не разрешено TypesScript: tsc выдаст вам ошибку о двух звездочках, появляющихся в желаемом сопоставлении. Так что это тоже не вариант.

Использование package.json

Вы можете избежать проблемы переименования, добавив package.json к каждому пакету с полем "main", которое указывает на файл, который вы хотите считать точкой входа вашего пакета. Например, packages/jsx/package.json может содержать это:

{
  "main": "jsx.jsx"
}

Предоставляя аналогичные файлы для всех других пакетов, вы можете уменьшить соответствующую конфигурацию до:

"baseUrl": "",
"paths": {
  "*": ["packages/*", "*"]
},

Или вы можете использовать "baseUrl", чтобы указать на ваши пакеты и полностью опустить "paths":

"baseUrl": "packages/",

Убедитесь, что вы скопировали файлы package.json, потому что tsc просто просто проигнорирует их , если в этих файлах есть синтаксическая ошибка.

Добавить index Файлы, которые экспортируют ваш модуль ввода

Другим методом будет использование индексных файлов, которые просто реэкспортируют весь файл, который в противном случае вы хотели бы использовать в качестве точки входа в ваш пакет. Файлы, которые у вас сейчас есть, останутся там, но на них будут ссылаться соответствующие файлы index. Например, packages/tsx/index.ts может быть:

export { default } from "./tsx";

Если все ваши пакеты обеспечивают экспорт по умолчанию, все они могут следовать шаблону выше. В противном случае, если пакет экспортирует несколько символов и просто хочет переэкспортировать все, вы можете сделать:

export * from "./myModule"; 

Если вы сделаете это для всех ваших пакетов, вам не нужно ничего переименовывать, но у вас будут дополнительные index файлы для соответствия "*": ["*", "packages/*"] отображению.

В комментарии вы упомянули об использовании такого инструмента, как Barrelsby, для генерации index файлов. Я был бы обеспокоен влиянием на развитие. Я вижу создание файла индекса, выступающего в качестве фасада, как части публикации вашего проекта. Поэтому люди, использующие опубликованный проект, имеют дело с файлом, сгенерированным Barrelsby или каким-либо другим инструментом. Однако, ваши index файлы кажутся мне внутренними для вашего проекта. Таким образом, чтобы получить надлежащую поддержку IDE при разработке , индексные файлы должны уже существовать, прежде чем участники начнут вносить свой вклад. Таким образом, участники должны запустить что-то, что генерирует индексные файлы, прежде чем они начнут вносить свой вклад. Вы также сгенерировали бы файлы, которые соседствуют с файлами, созданными непосредственно разработчиками. Я стараюсь избегать этого в своих проектах.

Если бы это был мой проект, и я решил добавить файлы index для соответствия отображению tsconfig.json, я бы стремился структурировать свой проект так, чтобы файлы index сводились к одному из двух приведенных выше случаев,и пропустить с помощью генератора кода.(На самом деле, я бы нацелился на 2-й из двух приведенных выше случаев, потому что я предпочитаю избегать экспорта по умолчанию. См. здесь для обсуждения вопросов с экспортом по умолчанию.)

ИндивидуальноСопоставление пакетов

Если другие решения проблематичны для вашего конкретного проекта, вы можете предоставить одно сопоставление для пакета:

"paths": {
  "jsx": ["packages/jsx/jsx.jsx"],
  "tjs": ["packages/tjs/tjs.js"],
  "tscript": ["packages/tscript/tscript.js"],
  "tsx": ["packages/tsx/tsx.tsx"],
},

Это означает добавление сопоставления каждый раз, когда вы добавляете новый пакет.Является ли это жизнеспособным, зависит от вашего конкретного проекта.Вы также можете использовать baseUrl, установленный на "packages/", и удалить packages/ из всех указанных выше путей:

"baseUrl": "packages/",
"paths": {
  "jsx": ["jsx/jsx.jsx"],
  "tjs": ["tjs/tjs.js"],
  "tscript": ["tscript/tscript.js"],
  "tsx": ["tsx/tsx.tsx"],
},

Это делает все это менее многословным, хотя вам все равно придется предоставлять одно сопоставление для пакета.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...