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

时间:2017-09-18 19:22:03

标签: webpack vue.js browserify vue-loader

我试图用webpack和Vue.js运行plotly.js

对于简单的情节,如散布它可以正常工作,具有以下配置:

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'),
]);

散点图一切正常,但是当我尝试使用时:

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'
        }
     ]

任何提示,或线索如何进行?

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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