Vue,Webpack,DC.js和Finally Crossfilter

Question

我正在尝试构建一个概念验证应用程序,它使用DC.js引入一些静态数据并将其可视化.我们决定使用Vue.js作为我们的框架,使用Webpack作为构建工具.我在基本配置中包含了D3.js,Crossfilter和DC.js.

resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'd3': path.resolve(__dirname, '../bower_components/d3/d3.min.js'),
      'crossfilter': path.resolve(__dirname, '../bower_components/crossfilter/crossfilter.min.js'),
      'dc': path.resolve(__dirname, '../bower_components/dcjs/dc.js') // using unminified version to look at exactly where the error is coming from
    }
}

并在具有实际可视化组件的文件中如此.

var d3 = require('d3')
var cf = require('crossfilter')
var crossfilter = cf.crossfilter
var dc = require('dc')

但是DC.js需要交叉过滤器才能工作,它会挂起在DC.js上下文中调用crossfilter的第一个实例.加载页面后,我无法再访问crossfilter控制台,但我可以访问D3.是什么让D3.js成为一个全球性的需求,而不是将crossfilter作为一个整体？

我在这里有一些配置吗？

Answer 1

因此,让Crossfilter和DC.js与webpack和vue一起工作是可能的.我必须对DC.js源进行修改才能使其正常工作.

1. 在webpack.base.conf.js您需要将以下内容添加到模块导出中.

   plugins: [ new webpack.ProvidePlugin({ d3: 'd3', crossfilter: 'crossfilter', dc: 'dc' }) ]

这使得这三个库在全球范围内可用.不要求他们.

2. 如果像我一样你使用ESlint,你需要添加以下内容,eslintrc.js让它忽略你不需要这些文件的事实.

   'globals': { 'd3': true, 'dc': true, 'crossfilter': true }

3. 最后在'use strict';声明后的DC.js中你需要设置crossfilter.

   var crossfilter = crossfilter.crossfilter;

虽然这不是一个完美的答案,但它至少让我能够渲染图表.现在,如果我能弄清楚如何将全局Crossfilter包重新定义为crossfilter.crossfilter,我觉得我有一个完整的答案.