使用 Webpack 导入/编译 d3 v4

Question

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

var d3 = require("d3");

这没有用。我尝试安装loader，添加

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

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

var d3 = require("d3!");

这也不起作用。我也试过 here 和here (last answer re the loader) 的东西。

我的浏览器出现以下错误：

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)");

我的代码仓库是here。

提前致谢！

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');