[英]Bootstrap4 typings(index.d.ts) cannot find module 'popper.js' on VisualStudio 2019 with TypeScript3.9 and Libman
I use VisualStudio 2019 with TypeScript3.9 and Libman.我将 VisualStudio 2019 与 TypeScript3.9 和 Libman 结合使用。
And I need Bootstrap4 and jQuery. So try get these libraries and typings(index.d.ts) by Libman.我需要 Bootstrap4 和 jQuery。所以尝试通过 Libman 获取这些库和 typings(index.d.ts)。
Then Bootstrap4 typing(index.d.ts) get error "Cannot find module popper.js".然后 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"
I found similar problems and answers.我发现了类似的问题和答案。
It could only solve the problem temporarily.只能暂时解决问题。
I changed bootstrap4 typing(index.d.ts) to relative path as import * as Popper from "../popper_v1";
我将 bootstrap4 typing(index.d.ts) 更改为相对路径 as import * as Popper from "../popper_v1";
is fixed error.是固定错误。 But Libman override this manually-changed index.d.ts.但是 Libman 覆盖了这个手动更改的 index.d.ts。
_ _
What can I do to fix this error?我该怎么做才能修复此错误? Do I need to install manually modified index.d.ts, like Popper v1.X?我是否需要安装手动修改的 index.d.ts,比如 Popper v1.X?
Thanks.谢谢。
Create ASP.Net4 MVC Project on.Net Framework 4.8在 .Net Framework 4.8 上创建 ASP.Net4 MVC 项目
Create libman.json to add some libraries and TS typings创建 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/"
}
]
}
** Note: I got typing(index.d.ts) of popper.js ver.1.X from GitHub repository. ** 注意:我从 GitHub 存储库中获取了 popper.js ver.1.X 的 typing(index.d.ts)。
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"lib": [ "ES6", "DOM" ],
"baseUrl": ".",
"typeRoots": [
"./lib/types"
]
},
"exclude": [
"node_modules",
"wwwroot",
"lib"
]
}
After these steps, bootstrap4 typing(index.d.ts) get error "Cannot find module popper.js" on import * as Popper from "popper.js";
在这些步骤之后,bootstrap4 typing(index.d.ts) 在import * as Popper from "popper.js";
. .
My tsconfig.json has "target": "ES5"
.我的 tsconfig.json 有"target": "ES5"
。 And has not "module"
property.并且没有"module"
属性。
It makes "module"
property to default.它使"module"
属性成为默认值。 And under "ES5"
target, default is "CommonJS"
.在"ES5"
目标下,默认是"CommonJS"
。
Then, has not "moduleResolution" property too.然后,也没有“moduleResolution”属性。 So "module": "CommonJS"
makes "moduleResolution"
property to "Node"
.所以"module": "CommonJS"
将"moduleResolution"
属性设置为"Node"
。
Yes, compiler uses "Node" module resolution system.是的,编译器使用“节点”模块解析系统。
. .
This handbook said, non-relative import(eg import * from "banana"
) will search "node_modules" directory recursively(to parent). 本手册说,非相对导入(例如import * from "banana"
)将递归地(到父级)搜索“node_modules”目录。
Yes, directory must be named as "node_modules".是的,目录必须命名为“node_modules”。
Otherwise we use Libman, but latest TypeSciript's basic theory is based on "node.js"!否则我们使用 Libman,但最新的 TypeSciript 的基本理论是基于“node.js”的!
And "Classic" resolution system is legacy and useless.而“经典”解析系统是遗留的且无用的。
Finally, we need to change tsconfig.json to search our "lib" directory.最后,我们需要更改 tsconfig.json 以搜索我们的“lib”目录。 Or change directory name as "node_modules" for adjusting to "Node" resolution system(Not recommended. We use Libman, not node).或者将目录名称更改为“node_modules”以调整为“Node”解析系统(不推荐。我们使用 Libman,而不是 node)。
As a reason by 1, we need "node_modules" directory.作为 1 的原因,我们需要“node_modules”目录。 But libman's default directory name is "lib".但是 libman 的默认目录名称是“lib”。
This cause compiler can not search libraries on "lib" directory.这导致编译器无法在“lib”目录中搜索库。
If non-relative import(eg import * from "banana"
) is used, compiler search "./node_modules/banana.js(ts)" or "./node_modules/banana/*".如果使用非相对导入(例如import * from "banana"
),编译器搜索“./node_modules/banana.js(ts)”或“./node_modules/banana/*”。
My libman.config has typing(.d.ts) of popper.js version 1.X.我的 libman.config 有 popper.js 版本 1.X 的 typing(.d.ts)。
{
"provider": "filesystem",
"library": "lib_ManualInstallSources/popper_v1/",
"destination": "lib/types/popper_v1/"
}
Yes... my "desitination"
property is "popper_v1".是的...我的“desitination "desitination"
属性是“popper_v1”。
It is wrong named.这是错误的命名。 import * as Popper from "popper.js"
can not find this directory. import * as Popper from "popper.js"
找不到这个目录。 Need fix directory name to "lib/types/popper.js".需要将目录名称修复为“lib/types/popper.js”。
I found two petterns to fix.我找到了两个 petterns 来修复。
I suggest to use 1. Because we use Libman, not Node.我建议使用 1。因为我们使用的是 Libman,而不是 Node。 If we see the "node_modules" directory, it leads to the misconception that we are using Node.如果我们看到“node_modules”目录,就会产生我们正在使用 Node.js 的误解。
However, by changing to "node_modules", the overall configuration can be made to look easier.但是,通过更改为“node_modules”,可以使整体配置看起来更简单。
// 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/"
}
]
}
{
"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.