Типизация Bootstrap4 (index.d.ts) не может найти модуль popper.js в VisualStudio 2019 с TypeScript3.9 и Libman

Question

Типизация Bootstrap4 (index.d.ts) не может найти модуль popper.js в VisualStudio 2019 с TypeScript3.9 и Libman

Я использую VisualStudio 2019 с TypeScript3.9 и Libman.

И мне нужны Bootstrap4 и jQuery. Так что попробуйте получить эти библиотеки и типы (index.d.ts) от Libman.

Затем при вводе Bootstrap4 (index.d.ts) появляется ошибка "Не удается найти модуль popper.js".

// Type definitions for Bootstrap 4.5
// Project: https://github.com/twbs/bootstrap/, https://getbootstrap.com
// Definitions by: denisname <https://github.com/denisname>
//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

/// <reference types="jquery"/>

import * as Popper from "popper.js";     // ERROR!: "Cannot find module popper.js"

Я нашел похожие проблемы и ответы.

Это могло решить проблему только временно.

Я изменил ввод bootstrap4 (index.d.ts) на относительный путь как import * as Popper from "../popper_v1";исправлена ошибка. Но Libman отменяет этот измененный вручную index.d.ts.

_

Что я могу сделать, чтобы исправить эту ошибку? Нужно ли мне устанавливать вручную измененный index.d.ts, например Popper v1.X?

Спасибо.

Действия по устранению ошибки.

Создание проекта ASP.Net4 MVC на.Net Framework 4.8
Создайте libman.json, чтобы добавить некоторые библиотеки и типы TS

{
  "version": "1.0",
  "defaultProvider": "jsDelivr",
  "libraries": [
    {
      "library": "bootstrap@4.5.2",
      "destination": "lib/bootstrap/"
    },
    {
      "library": "@types/bootstrap@4.5.0",
      "destination": "lib/types/bootstrap/"
    },
    {
      "library": "jquery@3.5.1",
      "destination": "lib/jquery/",
      "files": [
        "dist/jquery.js",
        "dist/jquery.min.js",
        "dist/jquery.min.map",
        "dist/jquery.slim.js",
        "dist/jquery.slim.min.js",
        "dist/jquery.slim.min.map",
        "external/sizzle/LICENSE.txt",
        "external/sizzle/dist/sizzle.js",
        "external/sizzle/dist/sizzle.min.js",
        "external/sizzle/dist/sizzle.min.map",
        "AUTHORS.txt",
        "LICENSE.txt",
        "README.md"
      ]
    },
    {
      "library": "@types/jquery@3.5.1",
      "destination": "lib/types/jquery/"
    },
    {
      "library": "@types/sizzle@2.3.2",
      "destination": "lib/types/sizzle/"
    },
    {
      "provider": "cdnjs",
      "library": "popper.js@1.16.1",
      "destination": "lib/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "lib/types/popper_v1/"
    }
  ]
}

** Примечание: я набрал (index.d.ts) popper.js ver.1.X из репозитория GitHub.

Создайте tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "lib": [ "ES6", "DOM" ],
    "baseUrl": ".",
    "typeRoots": [
      "./lib/types"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "lib"
  ]
}

После этих шагов при вводе bootstrap4 (index.d.ts) появляется ошибка "Не удается найти модуль popper.js" на import * as Popper from "popper.js";.

2

typescript visual-studio bootstrap-4 typescript-typings libman

Источник

user4310444 18 авг '20 в 09:02

1 ответ

Другие вопросы по тегам typescript visual-studio bootstrap-4 typescript-typings libman

user4310444 20 авг '20 в 11:29 2020-08-20 11:29 · Answer 1 · 2020-08-20 11:29

Я нашел двух петтернов, которые нужно исправить.

Измените настройки tsconfig.json, чтобы компилятор мог выполнять поиск в каталоге "lib".
Измените имя каталога библиотек через Libman на "node_modules"(не рекомендуется).

Эта проблема вызвана несколькими причинами.

Механизм управления модулями TypeScript по умолчанию основан на node.js.
Libman использует каталог "lib" для размещения библиотек по умолчанию.
Имена каталогов библиотеки должны быть такими же, как ModuleName.

[Причины]

1. Механизм управления модулями TypeScript основан на node.js.

В моем tsconfig.json есть "target": "ES5". И не"module" свойство.

Это делает "module"свойство по умолчанию. И под"ES5" цель, по умолчанию "CommonJS".

Кроме того, не имеет свойства moduleResolution. Так"module": "CommonJS" делает "moduleResolution" собственность "Node".

Да, компилятор использует систему разрешения модулей "Узел".

.

> Система разрешения "узлов" в TypeScript 3.9

В этом справочнике сказано, что не относительный импорт (например,import * from "banana") будет рекурсивно искать каталог "node_modules"(до родительского).

Да, каталог должен называться "node_modules".

В противном случае мы используем Libman, но основная теория последнего TypeSciript основана на "node.js"!
А "классическая" система разрешения унаследована и бесполезна.

Наконец, нам нужно изменить tsconfig.json для поиска в нашем каталоге "lib". Или измените имя каталога на "node_modules" для настройки на систему разрешения "Узел" (не рекомендуется. Мы используем Libman, а не node).

2. Libman использует каталог "lib" для установки библиотек по умолчанию.

В качестве причины на 1 нам нужен каталог "node_modules". Но имя каталога по умолчанию libman - "lib".

По этой причине компилятор не может искать библиотеки в каталоге "lib".

3. Имена каталогов библиотеки должны совпадать с ModuleName.

Если не относительный импорт (например, import * from "banana") используется поиск компилятора "./node_modules/banana.js(ts)" или "./node_modules/banana/*".

В моем libman.config есть типизация (.d.ts) popper.js версии 1.X.

{
  "provider": "filesystem",
  "library": "lib_ManualInstallSources/popper_v1/",
  "destination": "lib/types/popper_v1/"
}

Да мой "desitination" свойство "popper_v1".

Это неправильно названо.import * as Popper from "popper.js"не могу найти этот каталог. Необходимо исправить имя каталога на "lib / types / popper.js".

[Как исправить]

Я нашел двух петтернов, которые нужно исправить.

Измените настройки tsconfig.json, чтобы компилятор мог выполнять поиск в каталоге "lib".
Измените имя каталога библиотек через Libman на "node_modules"(не рекомендуется).

Я предлагаю использовать 1. Поскольку мы используем Libman, а не Node. Если мы видим каталог "node_modules", это приводит к неправильному представлению о том, что мы используем Node.

Однако, изменив значение на "node_modules", можно сделать общую конфигурацию проще.

1. Измените настройки tsconfig.json, чтобы компилятор мог искать каталог "lib".

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "lib": [ "ES6", "DOM" ],
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types", // Default path to search typings.
      "./lib/types"            // Directory of typings that located by Libman.
    ],
    "paths": {
      // If absolute module name provided on .ts/.d.ts files, compiler will check "./lib/moduleName", "./lib/types/moduleName".
      // e.g. 'import * as Popper from "popper.js"' is convert to "./lib/popper.js" and "./lib/types/popper.js".
      //      Then "./lib/types/popper.js" is correctly path. Error fixed.
      "*": [ "lib/*", "lib/types/*" ]
    }
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "lib"
  ]
}

// libman.json
{
  "version": "1.0",
  "defaultProvider": "jsDelivr",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "popper.js@1.16.1",
      "destination": "lib/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "lib/types/popper.js/"
    },
    {
      "library": "bootstrap@4.5.2",
      "destination": "lib/bootstrap/"
    },
    {
      "library": "@types/bootstrap@4.5.0",
      "destination": "lib/types/bootstrap/"
    },
    {
      "library": "jquery@3.5.1",
      "destination": "lib/jquery/",
      "files": [
        "dist/jquery.js",
        "dist/jquery.min.js",
        "dist/jquery.min.map",
        "dist/jquery.slim.js",
        "dist/jquery.slim.min.js",
        "dist/jquery.slim.min.map",
        "external/sizzle/LICENSE.txt",
        "external/sizzle/dist/sizzle.js",
        "external/sizzle/dist/sizzle.min.js",
        "external/sizzle/dist/sizzle.min.map",
        "AUTHORS.txt",
        "LICENSE.txt",
        "README.md"
      ]
    },
    {
      "library": "@types/jquery@3.5.1",
      "destination": "lib/types/jquery/"
    },
    {
      "library": "@types/sizzle@2.3.2",
      "destination": "lib/types/sizzle/"
    }
  ]
}

2. Измените имя каталога библиотек через Libman на "node_modules"(не рекомендуется).

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "lib": [ "ES6", "DOM" ],
    "baseUrl": "."
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "lib"
  ]
}

{
  "version": "1.0",
  "defaultProvider": "jsDelivr",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "popper.js@1.16.1",
      "destination": "node_modules/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "node_modules/types/popper.js/"
    },
    {
      "library": "bootstrap@4.5.2",
      "destination": "node_modules/bootstrap/"
    },
    {
      "library": "@types/bootstrap@4.5.0",
      "destination": "node_modules/types/bootstrap/"
    },
    {
      "library": "jquery@3.5.1",
      "destination": "node_modules/jquery/",
      "files": [
        "dist/jquery.js",
        "dist/jquery.min.js",
        "dist/jquery.min.map",
        "dist/jquery.slim.js",
        "dist/jquery.slim.min.js",
        "dist/jquery.slim.min.map",
        "external/sizzle/LICENSE.txt",
        "external/sizzle/dist/sizzle.js",
        "external/sizzle/dist/sizzle.min.js",
        "external/sizzle/dist/sizzle.min.map",
        "AUTHORS.txt",
        "LICENSE.txt",
        "README.md"
      ]
    },
    {
      "library": "@types/jquery@3.5.1",
      "destination": "node_modules/types/jquery/"
    },
    {
      "library": "@types/sizzle@2.3.2",
      "destination": "node_modules/types/sizzle/"
    }
  ]
}