Javascript Vue、Webpack、DC.js，最后是Crossfilter

我正在尝试构建一个概念验证应用程序，它使用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需要crossfilter才能工作，它挂起在DC.js上下文中对crossfilter的调用的第一个实例上。此外，加载页面后，我无法再访问控制台中的

crossfilter

，但我可以访问

D3

。什么是将D3.js作为一个全局需求引入，而不是将交叉过滤器作为一个整体引入

---

这里有我忽略的一些配置吗？

所以让Crossfilter和DC.js与webpack和vue一起工作是可能的。我必须对DC.js源代码进行修改才能使其正常工作

在

webpack.base.conf.js

中，您需要将以下内容添加到模块导出中

插件：[
新的webpack.ProvidePlugin({
d3:‘d3’，
crossfilter:“crossfilter”，
dc:“dc”
})
]

这使这三个库在全球范围内可用。不需要它们

如果你像我一样使用ESlint，你需要将以下内容添加到

eslintrc.js

中，让它忽略不需要这些文件的事实

'globals'：{
“d3”：对，
“dc”：对，
“交叉过滤器”：true
}

最后在DC.js中，紧跟在

的“使用严格”之后声明您需要设置交叉过滤器

var crossfilter=crossfilter.crossfilter

---

虽然这不是一个完美的答案，但它至少让我能够绘制图表。现在，如果我能想出如何将全局交叉过滤器包重新定义为Crossfilter.Crossfilter，我会觉得我有一个完整的答案

您是否可以使用

{externals:'crossfilter'：'crossfilter'}

并将

bower_组件添加到解析目录列表（）？您是否可以发布对dc.js所做的更改以使用Vuejs。您可以在JSFIDLE上发布示例项目吗？