自定义nvd3构建的推荐方法是什么？

Question

NVD3包含了十几种图表制作方法，而且已经接近了。压缩前500。我想找到方法来削减这个文件，特别是因为我们只使用线和条形图。

构建模块化NVD3库的推荐方法是什么？

Answer 1

我修改了grunt file，注释掉了所有不需要的内容：

src: [
   'src/intro.js',
   'src/core.js',
   'src/interactiveLayer.js',
   'src/tooltip.js',
   'src/utils.js',
   'src/models/axis.js',
   // 'src/models/historicalBar.js',
   // 'src/models/bullet.js',
   // 'src/models/bulletChart.js',
   // 'src/models/cumulativeLineChart.js',
   // 'src/models/discreteBar.js',
   // 'src/models/discreteBarChart.js',
   // 'src/models/distribution.js',
   'src/models/historicalBar.js',
   // 'src/models/historicalBarChart.js',
   // 'src/models/indentedTree.js',
   'src/models/legend.js',
   'src/models/line.js',
   // 'src/models/lineChart.js',
   'src/models/linePlusBarChart.js',
   // 'src/models/lineWithFocusChart.js',
   // 'src/models/linePlusBarWithFocusChart.js',
   // 'src/models/multiBar.js',
   // 'src/models/multiBarChart.js',
   // 'src/models/multiBarHorizontal.js',
   // 'src/models/multiBarHorizontalChart.js',
   // 'src/models/multiChart.js',
   // 'src/models/ohlcBar.js',
   // 'src/models/pie.js',
   // 'src/models/pieChart.js',
   'src/models/scatter.js',
   // 'src/models/scatterChart.js',
   // 'src/models/scatterPlusLineChart.js',
   // 'src/models/sparkline.js',
   // 'src/models/sparklinePlus.js',
   // 'src/models/stackedArea.js',
   // 'src/models/stackedAreaChart.js',
   'src/outro.js'
   ]

这是可行的，但是基于模块的更好的解决方案(browserify，AMD.)会更好。

Answer 2

因此，在v1.8.2更新gruntfile文件被稍微更改之后。您将不再看到js文件的列表。相反，您将看到'src/models/*.js',

我正在根据所选的答案创建自定义构建。因此，为了创建它，我遍历了每个图表模块，并记录了它们使用的模型。稍后，我将这些js-files添加到Gruntfile.js中的concat.js.src对象中。下面是最常见的LineChart的一个示例：

concat: {
    ...
    js: {
        options: {
            ...
        },
        src: [
        'src/core.js',
        'src/dom.js',
        'src/interactiveLayer.js',
        'src/tooltip.js',
        'src/utils.js',
        //Include all files in src/models
        // 'src/models/*.js',
        // example to exclude files: '!src/models/excludeMe*'
        'src/models/axis.js',
        'src/models/legend.js',
        'src/models/line.js',
        'src/models/lineChart.js',
        'src/models/scatter.js',
        ],
        ...
    }
},