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

use*_*142 5 browserify webpack vue.js vue-loader

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

对于像 scatter 这样的简单图,它可以通过以下配置正常工作:

在 webpack.config.js 上

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

    ],
Run Code Online (Sandbox Code Playgroud)

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

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

使用 scatter 一切正常,但是当我尝试使用时:

type: 'scatter3d',
Run Code Online (Sandbox Code Playgroud)

我收到以下错误:

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:
Run Code Online (Sandbox Code Playgroud)

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

我已经尝试按照文档的 GitHub 自述链接上的建议在我的项目中插入转换,但两个测试都不起作用(使用 .js 和 .vue):

使用 .js

    loaders: [
         {
            test: /\.js$/,
            loader: 'ify-loader',
            enforce: 'post'
        }
     ]
Run Code Online (Sandbox Code Playgroud)

使用 .vue

loaders: [
         {
            test: /\.vue$/,
            loader: 'ify-loader',
            enforce: 'post'
        }
     ]
Run Code Online (Sandbox Code Playgroud)

任何提示,或线索如何继续?

小智 2

import Plotly from 'plotly.js/dist/plotly.min'
Run Code Online (Sandbox Code Playgroud)

  • 虽然此代码可以回答该问题,但提供有关“如何”和“为什么”解决问题的附加上下文将提高​​答案的长期价值。 (5认同)