WebStorm配置Plotly.js遇报错求解决：require未解析、var提示等

嘿，我来帮你逐个搞定这些问题！咱们从代码里的核心问题入手：

1. require() 报错：Unresolved method or function #

你已经通过CDN <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 把Plotly.js引入到浏览器环境了，这时候完全不需要用require()——require()是Node.js（后端/模块化项目）的专属语法，浏览器原生不支持，WebStorm识别到你在浏览器环境用Node的API，所以抛出了报错。

而且你写的require('plotly')("jhharvey", "••••••••••")其实是Plotly的Node.js SDK用法（用来上传图表到Plotly官网），和你在浏览器里渲染本地图表的需求完全不匹配。直接删掉这行代码就行，CDN已经把Plotly对象挂载到全局window上了，直接调用就行。

2. 'var' used instead of 'let' or 'const' 提示 #

这是WebStorm的代码质量检查提示，ES6+规范里更推荐用let（用于后续需要重新赋值的变量）和const（用于定义后不会修改的常量）代替var——毕竟var存在变量提升、函数级作用域的坑，容易引发意外bug。你可以把代码里的var替换成对应的关键字：

• 像trace、data这种定义后没修改过的变量，用const
• 如果后续需要更新变量值，再用let

3. Plotly未导入的提示 #

这个问题本质是你错误用require()覆盖了全局的Plotly，同时WebStorm可能没识别到CDN引入的全局变量。解决方法很简单：

• 删掉那行require()代码后，全局的Plotly就能正常使用了
• 如果WebStorm还是提示Plotly未定义，在代码顶部加一行注释告诉IDE这是全局变量：/* global Plotly */

修改后的完整可运行代码示例 #

<head>
    <meta charset="UTF-8">
    <!-- Include Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <title> IOT webpage w/real time graph </title>
</head>
<body>
    <!-- 必须添加这个DOM元素，Plotly需要它来渲染图表 -->
    <div id="myDiv"></div>

    <script>
    /* global Plotly */ // 告诉WebStorm Plotly是全局变量，消除提示
    const trace = {
        x: [1, 2, 3, 4, 5, 6, 7, 8],
        y: [1, 4, 9, 16, 25, 36, 49, 64],
        mode: 'line'
    };
    const data = [trace];
    Plotly.newPlot('myDiv', data);
    </script>
</body>

另外补充个小细节：你原来的代码里没有<body>标签和承载图表的<div id="myDiv">，这也会导致Plotly找不到渲染目标，所以我特意加上了这个节点，一定要确保页面里存在它哦。

内容的提问来源于stack exchange，提问作者J H