使用 Webpack 导入/编译 d3 v4

Question

我最近将PostCSS，Gulp和Webpack合并到我的工作流程中，但是学习曲线非常陡峭(特别是Webpack！(，而且我在编译d3时遇到了问题。我已经安装了 d3 和 npm install d3 --save 并尝试将其导入为：

var d3 = require("d3");

这行不通。我尝试安装加载器，添加

     new webpack.ProvidePlugin({
        d3: "d3"
    }),

到我的 webpack.config 文件并导入为

var d3 = require("d3!");

这也不起作用。我也在这里和这里尝试过这些东西(最后一个答案是加载器(。

我从浏览器中收到以下错误：

Uncaught ReferenceError: d3 is not defined

gulp 在命令行中给了我以下错误：

..../node_modules/loader-runner/lib/loadLoader.js:35 throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");

我的代码存储库在这里。

提前感谢！

Answer 1

只是想我会指出 d3 从 v3 到 v4 的更新非常具有破坏性。我遇到了与您提到的类似的问题，直到我意识到 d3 代码几乎在任何情况下都发生了变化。

我能够使用 webpack 正常导入 d3(作为节点模块安装(

import * as d3 from "d3";

之后，错误使它看起来像没有导入 d3，但这是因为我使用的是 d3 v3 样式代码。

例如：

d3.layout.pie() 

现在很简单：

d3.pie()

重构后，一切按预期工作。我不确定这是否是导致您问题的原因，但这是需要注意的事情。

Answer 2

加载器不工作的原因是因为在 Webpack 2 中全名是必需的：

var d3 = require('d3-webpack-loader!');

但是，由于此加载器与 Webpack 2 不兼容(目前(，因此可以使用普通的d3包。但是在 Node 环境中(请记住 Gulp/Webpack 是在 Node 中运行的(，默认情况下会导入build/d3.node.js版本，这不是您想要的，因此以下 webpack 别名将解决问题：

resolve: {
    alias: {
        d3: 'd3/build/d3.js'
    }
},

将此添加到您的webpack.config.js中。有了这个，您可以继续使用：

var d3 = require('d3');