如何将plotly.js导入TypeScript？
我正在尝试将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'.回答 7
Stack Overflow用户
发布于 2016-08-31 11:30:49
结果是：
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图，您可以根据需要导入其他图形。
(我用的是角CLI -角5.2和Typesript 2.7.1)
Stack Overflow用户
发布于 2017-06-16 06:30:06
plotly.js (Github链接)有一个绝对类型的版本可供使用。这允许您在类型记录中使用普通的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将类型记录转换为javascript，并准备好包含在browserify网页中的代码。
这也适用于离子2！请确保手动添加以下包：
npm install --save glslify
npm install --save mapbox-glStack Overflow用户
发布于 2018-10-25 10:56:22
TS支持
npm install --save-dev @types/plotly.js`或
yarn add --dev @types/plotly.js`和
import { PlotData } from "plotly.js"; // or whatever you need⚠️不要在依赖项中安装@类型，因为它们完全用于开发目的。
问题
由于您为plotly.js添加了类型，所以您希望从plotly.js而不是某个特定模块导入内容。这一切都很好，直到您想要将它与react一起使用，例如react plotly+ plotly.js☹️。
我知道你没有明确提到反应，但我想你或其他有类似问题的人可能会发现这是有用的。
我不确定您的捆绑方法，但是，我正在使用Webpack 4，目前正在研究一个react+ plotly.js-basic-dist组合。
可能的组合是：
- 简单地+pltly.js-basic -我的选择。如果需要，可以添加更多的包。
- 反应+ CDN
- 反应-巧妙地+自定义捆绑
更多关于巧妙地定制捆绑包的信息。
这大大降低了捆的尺寸，太阳又一次照耀着我们。
但是..。
由于此方法将需要工厂和自定义dist，因此在撰写本文时，这些都没有类型
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);修复
- 创建@types文件夹
- 将typeRoots添加到tsconfig.json
N.B.下面的方法确实修复了上述导入的类型，但是我仍然有一个失败的编译，我没有按照接受的答案修复该编译：
希望你有一个更好的经验！
更新
我解决了编辑问题。这是因为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上，它现在运行良好。
https://stackoverflow.com/questions/39084438
复制相似问题
腾讯云开发者
