堆栈内存溢出
  繁体   English   中英

Bootstrap4 typings(index.d.ts) 在 VisualStudio 2019 上使用 TypeScript3.9 和 Libman 找不到模块“popper.js”

[英]Bootstrap4 typings(index.d.ts) cannot find module 'popper.js' on VisualStudio 2019 with TypeScript3.9 and Libman

 原文  2020-08-18 06:02:00  4   1    typescript/ visual-studio/ bootstrap-4/ typescript-typings/ libman

问题描述

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

我需要 Bootstrap4 和 jQuery。所以尝试通过 Libman 获取这些库和 typings(index.d.ts)。

然后 Bootstrap4 typing(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 typing(index.d.ts) 更改为相对路径 as 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": "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 的 typing(index.d.ts)。

  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 typing(index.d.ts) 在import * as Popper from "popper.js"; .

1 个解决方案

解决方案1
 2  2020-08-20 08:29:02

我找到了两个 petterns 来修复。

  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" 。

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

.

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

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

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

否则我们使用 Libman，但最新的 TypeSciript 的基本理论是基于“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 的 typing(.d.ts)。

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

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

这是错误的命名。 import * as Popper from "popper.js"找不到这个目录。 需要将目录名称修复为“lib/types/popper.js”。

[怎么修]

我找到了两个 petterns 来修复。

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

我建议使用 1。因为我们使用的是 Libman，而不是 Node。 如果我们看到“node_modules”目录，就会产生我们正在使用 Node.js 的误解。

但是，通过更改为“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/"
    }
  ]
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 TypeScript 找不到带有 index.d.ts 的节点模块 TypeScript 打字给我“index.d.ts 不是模块” Bootstrap 4 TypeScript 类型定义无法编译 - 找不到模块“popper.js” 在 index.d.ts npm 模块中包含自定义类型 “module/index.d.ts”和“@types/module/index.d.ts”之间的打字稿冲突 TypeScript输入文件node.d.ts与index.d.ts index.d.ts 错误 TS2307: 找不到我自己的模块 打字稿、index.d.ts 和 webpack：找不到模块错误 Typescript 未从模块的 index.d.ts 中找到类型 无法使用打字稿中的index.d.ts扩展Process接口
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM