在 Vue 上使用带有 Webpack 的 plotly.js 3d scatter3d

Posted 2023-02-22

【中文标题】在 Vue 上使用带有 Webpack 的 plotly.js 3d scatter3d

【英文标题】：Using plotly.js 3d scatter3d with Webpack on Vue

【发布时间】：2018-02-27 10:18:25

【问题描述】：

我正在尝试使用 webpack 和 Vue.js 运行 plotly.js

对于像 scatter 这样的简单绘图，使用以下配置可以正常工作：

在 webpack.config.js 上

loaders: [
        
            test: /node_modules/,
            loader: 'ify-loader'
        ,

    ],

在 vue 文件中我使用以下代码导入：

var Plotly = require('plotly.js/lib/core');
Plotly.register([
    require('plotly.js/lib/scatter'),
    require('plotly.js/lib/scatter3d'),
]);

使用 scatter 一切正常，但是当我尝试使用时：

type: 'scatter3d',

我收到以下错误：

It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform:

所以据我了解，除了 node_modules 之外，我还需要让 ify-loader 处理我的文件项目。

我已经尝试按照 GitHub 自述文件Link for the docs 中的建议在我的项目中插入转换，但两个测试都不起作用（使用 .js 和 .vue）：

使用 .js

    loaders: [
         
            test: /\.js$/,
            loader: 'ify-loader',
            enforce: 'post'
        
     ]

使用 .vue

loaders: [
         
            test: /\.vue$/,
            loader: 'ify-loader',
            enforce: 'post'
        
     ]

任何提示，或线索如何继续？

【参考方案1】：

import Plotly from 'plotly.js/dist/plotly.min'

【讨论】：

虽然此代码可以回答问题，但提供有关 如何 和 为什么 解决问题的附加上下文将提高​​答案的长期价值。

【参考方案2】：

也许使用require('plotly.js-dist')（不是import）可以解决问题。