如何解决Bootstrap4型index.d.ts在带有TypeScript3.9和Libman的Visual Studio 2019上找不到模块'popper.js' 纠正错误的步骤> TypeScript 3.9上的“节点”解析系统

我将Visual Studio 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"

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

它只能暂时解决问题。

我将bootstrap4类型（index.d.ts）更改为相对路径，因为import * as Popper from "../popper_v1";是固定错误。但是Libman会覆盖此手动更改的index.d.ts。

该如何解决此错误？我是否需要安装手动修改的index.d.ts，例如Popper v1.X？

谢谢。

纠正错误的步骤。

在.Net Framework 4.8上创建ASP.Net4 MVC项目
创建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/"
    }
  ]
}

**注意：我从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";上收到错误“找不到模块popper.js”。

解决方法

我发现有两个要修理的东西。

将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上的“节点”解析系统

This handbook说，非相对导入（例如import * from "banana"）将递归搜索“ node_modules”目录（到父目录）。

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

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

最后，我们需要更改tsconfig.json来搜索“ lib”目录。或将目录名称更改为“ node_modules”，以适应“节点”解析系统（不推荐。我们使用Libman，而不是节点）。

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/"
}

是的...我的"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","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,"baseUrl": "."
  },"lib"
  ]
}

{
  "version": "1.0","destination": "node_modules/popper.js/"
    },"destination": "node_modules/types/popper.js/"
    },"destination": "node_modules/bootstrap/"
    },"destination": "node_modules/types/bootstrap/"
    },"destination": "node_modules/jquery/","destination": "node_modules/types/jquery/"
    },"destination": "node_modules/types/sizzle/"
    }
  ]
}

Bootstrap4型index.d.ts在带有TypeScript3.9和Libman的Visual Studio 2019上找不到模块'popper.js' 纠正错误的步骤> TypeScript 3.9上的“节点”解析系统

如何解决Bootstrap4型index.d.ts在带有TypeScript3.9和Libman的Visual Studio 2019上找不到模块'popper.js' 纠正错误的步骤> TypeScript 3.9上的“节点”解析系统

纠正错误的步骤。

解决方法

我发现有两个要修理的东西。

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

[原因]

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

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

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

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

[如何修复]

1。将设置tsconfig.json更改为编译器可以搜索“ lib”目录。

2。通过Libman将库的目录名称更改为“ node_modules”（不推荐）。

相关推荐