Vue，Webpack，DC.js和Finally Crossfilter

我試圖構建一個概念證明應用程序，它使用DC.js引入一些靜態數據並將其可視化。我們決定使用Vue.js作爲我們的框架，並使用Webpack作爲我們的構建工具。我在基本配置中包含了D3.js，Crossfilter和DC.js。Vue，Webpack，DC.js和Finally Crossfilter

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作爲一種全球性需求將什麼帶入不作爲跨界過濾器？

我在這裏忽略了一些配置嗎？

來源

2016-05-05 Chris Maness

您可以使用'{externals：'crossfilter'：'crossfilter'}'並將'bower_components'添加到您的解析目錄列表（https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories ）？ – Jay

因此，獲得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 }

終於在DC.js的'use strict';聲明之後，你就需要設置crossfilter。

var crossfilter = crossfilter.crossfilter;

雖然這不是它至少有我能夠呈現的圖表一個完美的答案。現在，如果我能想出如何重新定義全局Crossfilter軟件包爲crossfilter.crossfilter，我會覺得我有一個完整的答案。

來源

2016-05-06 19:07:08

Vue，Webpack，DC.js和Finally Crossfilter

回答

相關問題