使用TypeScript3.9和Libman，Bootstrap4类型(index.d.ts)无法在VisualStudio 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"

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

• 引导4 TypeScript类型定义失败编译-找不到模块'popper.js‘
• 找不到模块"popper.js“角5 Visual 2017 asp.net内核
• 角@类型/引导错误:名称空间'popper.js‘没有导出成员

它只能暂时解决这个问题。

我将bootstrap4类型(index.d.ts)更改为相对路径，因为import * as Popper from "../popper_v1";是固定错误。但是Libman重写了这个手动修改的index.d.ts。

_

我能做些什么来纠正这个错误？是否需要安装手动修改的index.d.ts，如Popperv1.X？

谢谢。

报告错误的步骤。

1. 在ASP.Net4框架4.8上创建.Net MVC项目
2. 创建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 )。

1. 创建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) get错误在import * as Popper from "popper.js";上“无法找到模块popper.js”。

Answer 1

我找到了两片花瓣要修理。

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

这个问题是由多种原因造成的。

1. 类型记录的默认模块管理机制是基于node.js的。
2. 默认情况下，Libman使用"lib“目录放置库。
3. 库的目录名必须与ModuleName相同。

原因

1.类型记录的模块管理机制是基于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，而不是节点)。

2. Libman默认使用"lib“目录放置库。

原因之一是，我们需要"node_modules“目录。但是libman的默认目录名是"lib“。

这导致编译器不能在"lib“目录下搜索库。

3.库的目录名必须与ModuleName相同。

如果使用非相对导入(例如import * from "banana")，编译器搜索“./node_node/banana.js(Ts)”或“./node_node/banana/*”。

我的libman.config有popper.js版本1.X的类型(.d.ts)。

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

是的..。我的"desitination"属性是"popper_v1“。

名字是错的。import * as Popper from "popper.js"找不到这个目录。需要将目录名修正为“lib/type/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": "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/"
    }
  ]
}