2

我正在使用 Webpack 开发 Angular 8 项目。我能够集成Mapbox GL JS，但我不知道如何导入Mabox GL Draw。我有以下版本：

"@angular/core": "8.2.14",
"mapbox-gl": "^1.9.0",
"@types/mapbox-gl": "^1.8.2",
"@mapbox/mapbox-gl-draw": "^1.1.2",

我关注了 Mapbox GL Draw docs，所以在我的 Angular 服务中，我添加了：

import * as MapboxDraw from '@mapbox/mapbox-gl-draw';

所以我有这个错误：

TS7016：找不到模块“@mapbox/mapbox-gl-draw”的声明文件。'/home/tommy/Work/engineering/effector/effector-gui/node_modules/@mapbox/mapbox-gl-draw/index.js' 隐含了一个 'any' 类型。尝试npm install @types/mapbox__mapbox-gl-draw它是否存在或添加一个包含 `declare module '@mapbox/mapbox-gl-draw' 的新声明 (.d.ts) 文件；

按照这个建议，我尝试使用require而不是import：

const MapboxDraw = require('@mapbox/mapbox-gl-draw');

我有这个：

3:20 错误 Require 语句不是导入语句的一部分 @typescript-eslint/no-var-requires ./node_modules/jsonlint-lines/lib/jsonlint.js 中的错误模块未找到：错误：无法解析“fs” '/home/user/proj/node_modules/jsonlint-lines/lib

所以我尝试遵循这个，我修改了我的tsconfig.json并通过 npm "fs" 安装。但是会出现错误：

没有找到这个依赖： * fs in ./node_modules/jsonlint-lines/lib/jsonlint.js 要安装它，你可以运行： npm install --save fs No type errors found

所以我决定回到第一个错误，我跟着这个。我修改了 tsconfig.json文件添加了这些值：

    "typeRoots": ["node_modules/@types","./types"],
...
  "exclude": ["node_modules","./types"]

比我在这三个文件夹 types/@mapbox/mapbox-gl-draw/ 中创建index.d.ts文件的内容

declare module '@mapbox/mapbox-gl-draw';

但我得到这个错误

未定义（未定义，未定义）中的错误：TS2688：找不到“@mapbox”的类型定义文件。

现在我觉得离解决方案很近了，但我现在不知道如何走得更远。

4

2 回答 2

0

我在types/@mapbox文件夹中创建了一个额外的index.d.ts文件，其中包含以下内容：

declare module '@mapbox';

但这次我得到了这个：

ERROR  Failed to compile with 1 errors
This dependency was not found:
* fs in ./node_modules/jsonlint-lines/lib/jsonlint.js
To install it, you can run: npm install --save fs

在我的webpack.common.js文件中，我添加了与fs相关的行：

module.exports = (options) => ({
    node: { fs: 'empty' },
    resolve: {

然后代码编译成功。

于 2020-03-31T12:30:48.037 回答
0

@ts-ignore我能够在我的指令中得到一个：

// @ts-ignore
import * as MapboxDraw from "@mapbox/mapbox-gl-draw";

这在 webpack 配置中就像@tommynicoletti 的回答：

module.exports = (options) => ({
    node: { fs: 'empty' },
    resolve: {
于 2020-05-23T18:21:15.370 回答