我正在尝试构建一个概念验证应用程序,该应用程序使用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
在控制台中访问,但可以访问D3
。是什么将D3.js作为全局需求引入,而不是将crossfilter作为一个整体引入?
我在这里忽略了一些配置吗?
因此,使Crossfilter和DC.js与webpack和vue一起使用是可能的。我必须对DC.js源进行修改才能使其正常工作。
在其中,webpack.base.conf.js
您需要将以下内容添加到模块导出中。
plugins: [ new webpack.ProvidePlugin({ d3: 'd3', crossfilter: 'crossfilter', dc: 'dc' }) ]
这使得这三个库在全球范围内可用。不需要它们。
如果像我一样,您正在使用ESlint,则需要添加以下内容以eslintrc.js
使其忽略不需要这些文件的事实。
'globals': { 'd3': true, 'dc': true, 'crossfilter': true }
最后,在'use strict';
声明之后的DC.js中,您将需要设置crossfilter。
var crossfilter = crossfilter.crossfilter;
虽然这不是一个完美的答案,但至少使我能够绘制图表。现在,如果我能弄清楚如何将全局Crossfilter包重新定义为crossfilter.crossfilter,我会觉得我有一个完整的答案。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句