typescript - Bootstrap4 types(index.d.ts) 在使用 TypeScript 3.9 和 Libman 的 Visual Studio 2019 上找不到模块 'popper.js'

Question

我将 VisualStudio 2019 与 TypeScript3.9 和 Libman 结合使用。

我需要 Bootstrap4 和 jQuery。 因此，请尝试通过 Libman 获取这些库和类型(index.d.ts)。

然后 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"

---

我发现了类似的问题和答案。

• Bootstrap 4 TypeScript Type Definition fails to compile - Cannot find module 'popper.js'
• Cannot find module "popper.js" Angular 5 Visual Studio 2017 asp.net core
• Angular @types/bootstrap error: Namespace 'popper.js' has no exported member

只能暂时解决问题。

我将 bootstrap4 Typing(index.d.ts) 更改为相对路径，因为 import * as Popper from "../popper_v1"; 已修复错误。 但 Libman 覆盖了这个手动更改的 index.d.ts。

_

我可以做什么来修复这个错误？ 我是否需要安装手动修改的index.d.ts，例如 Popper v1.X？

谢谢。

---

重现错误的步骤。

1. 在 .Net Framework 4.8 上创建 ASP.Net4 MVC 项目

2. 创建 libman.json 以添加一些库和 TS 类型

{
  "version": "1.0",
  "defaultProvider": "jsDelivr",
  "libraries": [
    {
      "library": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97978c8b8c8a9988b8ccd6cdd6ca" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/bootstrap/"
    },
    {
      "library": "@types/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196d776c7769" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/types/bootstrap/"
    },
    {
      "library": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e445f5b4b5c576e1d001b001f" rel="noreferrer noopener nofollow">[email protected]</a>",
      "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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5238232737202b12617c677c63" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/types/jquery/"
    },
    {
      "library": "@types/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8af9e3f0f0e6efcab8a4b9a4b8" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/types/sizzle/"
    },
    {
      "provider": "cdnjs",
      "library": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daaab5aaaabfa8f4b0a99aebf4ebecf4eb" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "lib/types/popper_v1/"
    }
  ]
}

** 注意:我从 GitHub 存储库中输入了 popper.js ver.1.X 的类型(index.d.ts)。

创建 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)在import * as Popper from "popper.js";上出现错误“Cannot find module popper.js”。

---

Answer 1

我找到了两个需要修复的图案。

1. 将 tsconfig.json 设置更改为编译器可以搜索“lib”目录。
2. 通过 Libman 将库的目录名称更改为“node_modules”(不推荐)。

此问题是由多种原因引起的。

1. TypeScript 的默认模块管理机制基于 Node.js。
2. Libman 默认使用“lib”目录来放置库。
3. 库的目录名称必须与 ModuleName 相同。

---

[原因]

1。 TypeScript的模块管理机制是基于node.js的。

我的 tsconfig.json 有 "target": "ES5"。并且没有 "module" 属性。

它使“module”属性为默认值。在 "ES5" 目标下，默认为 "CommonJS"。

然后，也没有“moduleResolution”属性。 因此 "module": "CommonJS" 将 "moduleResolution" 属性设置为 "Node"。

是的，编译器使用“Node”模块解析系统。

.

> TypeScript 3.9 上的“节点”解析系统

This handbook也就是说，非相对导入(例如 import * from "banana")将递归地搜索“node_modules”目录(到父目录)。

是的，目录必须命名为“node_modules”。

否则我们使用Libman，但最新的TypeScript的基本理论是基于“node.js”!
而“经典”解析系统是遗留的且无用的。

最后，我们需要更改 tsconfig.json 来搜索“lib”目录。 或者将目录名称更改为“node_modules”以适应“Node”解析系统(不推荐。我们使用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 具有 popper.js 版本 1.X 的类型(.d.ts)。

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

是的...我的“destination”属性是“popper_v1”。

名字有误。 import * as Popper from "popper.js" 找不到此目录。 需要将目录名称修复为“lib/types/popper.js”。

---

[如何修复]

我找到了两个需要修复的图案。

1. 将设置 tsconfig.json 更改为编译器可以搜索“lib”目录。
2. 通过 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": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f6e9f6f6e3f4a8ecf5c6b7a8b7b0a8b7" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "lib/types/popper.js/"
    },
    {
      "library": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7b617a617d" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/bootstrap/"
    },
    {
      "library": "@types/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c584259425c" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/types/bootstrap/"
    },
    {
      "library": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0dac1c5d5c2c9f0839e859e81" rel="noreferrer noopener nofollow">[email protected]</a>",
      "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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5cfd4d0c0d7dce5968b908b94" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "lib/types/jquery/"
    },
    {
      "library": "@types/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8af9e3f0f0e6efcab8a4b9a4b8" rel="noreferrer noopener nofollow">[email protected]</a>",
      "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": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4849b84849186da9e87b4c5dac5c2dac5" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "node_modules/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "node_modules/types/popper.js/"
    },
    {
      "library": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562238233824" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "node_modules/bootstrap/"
    },
    {
      "library": "@types/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f3e9f2e9f7" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "node_modules/types/bootstrap/"
    },
    {
      "library": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d3c8ccdccbc0f98a978c9788" rel="noreferrer noopener nofollow">[email protected]</a>",
      "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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6208131707101b22514c574c53" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "node_modules/types/jquery/"
    },
    {
      "library": "@types/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91e2f8ebebfdf4d1a3bfa2bfa3" rel="noreferrer noopener nofollow">[email protected]</a>",
      "destination": "node_modules/types/sizzle/"
    }
  ]
}

---