如何将 plotly.js 导入 TypeScript？

Posted 2023-03-13

【中文标题】如何将 plotly.js 导入 TypeScript？

【英文标题】：How to import plotly.js into TypeScript?

【发布时间】：2016-12-29 07:04:02

【问题描述】：

我正在尝试将 plotly.js 导入 TypeScript。 Plotly.js 使用npm 安装。在我的 TypeScript 文件中，我使用

import 'plotly.js';

没关系，但我在 Plotly.<member> 之类的代码上遇到错误：

error TS2304: Cannot find name 'Plotly'

当我尝试时

import Plotly = require('plotly.js');

我来了

error TS2307: Cannot find module 'plotly.js'.

【问题讨论】：

您可以使用previous version if the current one has issues。

【参考方案1】：

有一个可用于 plotly.js (Github link) 的绝对类型版本。这允许您在 Typescript 中使用纯 javascript 版本。请按照以下步骤设置您的环境：

npm install --save plotly.js
npm install --save-dev @types/plotly.js

然后在您的代码中，您可以执行以下操作（示例取自 Github）：

import * as Plotly from 'plotly.js';

const data: Plotly.BarData[] = [
  
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  
];

Plotly.newPlot('test', data);

最后，您需要使用 tsc 将 Typescript 转换为 javascript，并使用 browserify 准备要包含在您的网页中的代码。

这现在也适用于 ionic 2！确保您手动添加以下包：

npm install --save glslify
npm install --save mapbox-gl

【讨论】：

plotly.js 也可以在ionic 2中使用

我在使用 plotly 输入时遇到 404 错误：node_modules/plotly.js/src/traces/bar.js 404（未找到），node_modules/plotly.js/src/traces/box.js 404（未找到）等等。你有这个问题吗？

你可以写import Plotly from 'plotly.js';，因为图书馆有一行export as namespace Plotly;

【参考方案2】：

结束了：

declare function require(moduleName: string): any;
var Plotly = require('plotly.js/lib/index-basic.js');

（参考 index-basic.js，因为我只需要基本功能，完整的库使用 index.js。）

编辑（2018 年 2 月）：

现在首选的方法是将路径添加到tsconfig.json 文件中，如下所示：

"compilerOptions": 
    "paths": 
        "plotly.js": [
            "../node_modules/plotly.js/lib/core.js"
        ]
    

然后像.ts这样的文件导入

import * as Plotly from 'plotly.js';

注意：在我只包含core.js的路径中，其中包含scatter的图形，您可以根据需要导入其他图形。

（我将它与 Angular CLI - Angular 5.2 和 Typesript 2.7.1 一起使用）

【讨论】：

我正在做var Plotly = require('plotly.js/dist/plotly.js')，它也可以正常工作。你知道，两者有什么不同吗？

@yugantarkumar 我只包括基本模块（我只需要散点图）。你包括完整的图书馆。检查此链接github.com/plotly/plotly.js/blob/master/dist/README.md

我只搜索了这个问题，因为 Plotly.js 不适用于 IE11。 @yugantarkumar 版本在 IE11 上对我有用，但发生了一些与 vertx 相关的错误。我的最终解决方案是 @eXavier 添加（2018 年 2 月）但 "../node_modules/plotly.js/lib/index-basic.js"（core.js 不足以呈现基本图表）。

【参考方案3】：

TS 支持

npm install --save-dev @types/plotly.js`

或

yarn add --dev @types/plotly.js`

和

import  PlotData  from "plotly.js"; // or whatever you need

⚠️不要在依赖项中安装 @types，因为它们专门用于开发目的。

问题

由于您为 plotly.js 添加了类型，因此您希望从 plotly.js 而不是特定模块导入内容。这一切都很好，直到您想将它与 react 一起使用，即 react-plotly + plotly.js ☹️

我知道你没有明确提到 React，但我想你或其他有类似问题的人可能会觉得这很有用。

我不确定您的捆绑方法，但是，我正在使用 Webpack 4，目前正在研究 react-plotly + plotly.js-basic-dist 组合。

可能的组合有：

react-plotly + plotly.js-basic-dist——我的选择。如果需要，您可以添加更多捆绑包 react-plotly + CDN react-plotly + custom bundle

更多关于customising plotly bundles。

这大大减小了捆绑包的大小，阳光再次照耀着我们。

但是……

由于这种方法需要工厂和自定义 dist，因此在撰写本文时，这些还没有类型

import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

修复

创建一个@types 文件夹

将 typeRoots 添加到 tsconfig.json

注意以下方法确实修复了上述导入的类型，但我仍然有一个失败的编译，我没有按照接受的答案修复它：

希望你有更好的体验！

---

更新

我修复了编译问题。这是因为 react-plotly.js 被捆绑在“依赖项”中。对于我的案例，供应商部门的处理方式如下：

/**
 * Given an array of files this will produce an object which contains the values for the vendor entry point
 */
function makeVendorEntry(config) 
    const packageJson = require('../package.json');
    const vendorDependencies = Object.keys(packageJson['dependencies']);

    const vendorModulesMinusExclusions = vendorDependencies.filter(vendorModule =>
        config.mainModules.indexOf(vendorModule) === -1 && config.modulesToExclude.indexOf(vendorModule) === -1);

    return vendorModulesMinusExclusions;


exports.makeVendorEntry = makeVendorEntry;

相反，我将 react-plotly.js 移至 devDependencies，它现在可以正常工作了。

【参考方案4】：

plotly.js basic & Co. 的类型

您还可以将类型与partial npm bundles 一起使用，例如基本或笛卡尔，从v1.39.0 开始。 plotly.js 基本示例（包含scatter、pie 和bar）：

npm i plotly.js-basic-dist
npm i -D @types/plotly.js

在 tsconfig.json 中添加以下内容：

"compilerOptions": 
  // make aliases absolute imports relative to the project root
  "baseUrl": "./",                
  "paths": 
    "plotly.js-basic-dist": [
      "node_modules/@types/plotly.js"
    ]
  

paths 配置上方只是将您导入的plotly.js-basic-dist 包映射到@types/plotly.js 中定义的那些类型，因此您可以将它们与plotly.js-basic-dist 一起使用。更多信息：

baseUrl paths

【讨论】：

不错。使用 Create React App 时，这需要使用 "extends" to fix its build process 进行一些技巧：正在对您的 tsconfig.json 文件进行以下更改：不得设置 compilerOptions.paths（不支持别名导入）我>。但这种诡计也很有效。

感谢工作。还要进行@Arjan 提到的更改。

【参考方案5】：

如果您要导入的 npm 库本身不提供类型声明，则您必须自己导入它们。首选工具是typings。

为了情节，似乎有人已经做了一个声明文件。因此，一旦您安装了类型（npm i -g typings），您就可以搜索 plotly 的类型声明（typings search plotly）。您会看到Definitely Typed 上有一个声明文件。为项目 (typings init) 初始化类型后，您可以安装声明文件 (typings i --global --save plotly.js)。

注意--global。这个特定的声明文件是一个全局声明文件。这意味着您不必导入任何类型，因为这些类型在您的项目中随处可用。例如。

// app.ts
let myPlotlyConfig: PlotlyConfig

【讨论】：

一般来说，你的打字是对的。 Plotly 的那些只是在一个非常早期的体育场，实际上只有 1 个功能，所以它还不能使用。无论如何+1

【参考方案6】：

使用 NPM 安装 plotly.js：

npm install --save plotly.js

然后在组件或服务中任何你想使用导入的地方：

import Plotly from 'plotly.js/lib/core';
Plotly.register([
 require('plotly.js/lib/heatmap'),
 require('plotly.js/lib/bar'),
 require('plotly.js/lib/pie') // can include as many plot types as you want
]);

使用 plotly lib 如下：

const data: Plotly.BarData[] = [
 
   x: ['giraffes', 'orangutans', 'monkeys'],
   y: [20, 14, 23],
   type: 'bar'
 
];

Plotly.newPlot('test', data);

【参考方案7】：

找不到模块“plotly.js/dist/plotly.js”的声明文件。 'C:/Users/spriy28/TEST2/tst/node_modules/plotly.js/dist/plotly.js' 隐含了一个 'any' 类型。

要消除错误，请使用这个。

在 tsconfig json 文件中添加noImplicitAny: false 以消除错误。

【讨论】：

真的很有帮助。

谢谢@SudhaPriya