TypeScript 导入路径答案

【问题标题】：TypeScript import pathsTypeScript 导入路径
【发布时间】：2017-12-03 23:07:18
【问题描述】：

我正在使用 TypeScript 构建一个 grafana 插件，与 here 相同。

文件夹结构如下：

不出所料，我无法编译我的 TypeScript 插件，因为在 module.ts

import { MetricsPanelCtrl } from 'app/plugins/sdk';

所有示例都使用路径“app/plugins/sdk”，即使 app 在目录结构中并不靠近它们。

那么他们是怎么做到的呢？

我尝试将我的导入路径更改为 '../../../../public/app/plugins/sdk' 并且更进一步，但随后得到了 1000 多个关于其他模块未编译的错误，例如：

Running "typescript:build" (typescript) task
>> ../../../public/app/core/components/code_editor/code_editor.ts(30,20): error TS2307: Cannot find module 'app/core/config'.
>> ../../../public/app/core/components/code_editor/code_editor.ts(31,17): error TS2307: Cannot find module 'brace'.

【问题讨论】：

通常情况下，公共文件夹是提供给浏览器的所有文件的“根”文件夹，在这种情况下。您确定要在“公共”之外提供文件吗？但相对于您的插件，“公共”文件夹是“../../../public”。但是我再次认为您不想将插件保留在您拥有的地方。您的服务器很可能不会从那里提供文件。
我听到了，将尝试与已安装的一起尝试，只是他的文档 (docs.grafana.org/plugins/developing/development) 明确表示将其放入数据文件夹中
与已安装的问题相同..
发现问题，添加答案:)

标签： typescript grafana

【解决方案1】：

错过了 README 的底部：

Grafana SDK Mocks 包包含插件需要在 TypeScript 中构建的 Grafana 类的模拟...

npm install --save-dev grafana/grafana-sdk-mocks

将指令放在所有 TypeScript 文件的顶部：

///<reference path="../node_modules/grafana-sdk-mocks/app/headers/common.d.ts" />

【讨论】：

应该避免这种情况。如果必须，请使用tsconfig.json 中的"files" 属性来引用它。
@AluanHaddad 是正确的。您不想尝试以这种方式引用 node_modules 。在此处查看我的项目：github.com/Clay-Ferguson/meta64，您将找到一个如何将 ReactJS 作为外部依赖项引入的示例，您可能需要做类似的事情。按照那个例子。如果我可以谦虚地说，...我知道我做对了。:)