用Webpack导入/编译d3 v4

我最近将PostCSS，Gulp和Webpack整合到了我的工作stream程中，但是学习曲线非常陡峭（尤其是Webpack！），并且在编译d3时遇到了问题。 我已经用npm install d3安装了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

装载机没有工作的原因是因为在Webpack 2中，全名是必须的：

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

然而，因为这个加载器不兼容Webpack 2（在这个时候），所以可以使用正常的d3软件包。 然而在一个Node env中（记住Gulp / Webpack是在Node中运行的）， build/d3.node.js版本是默认导入的，这不是你想要的，所以下面的webpack别名会解决这个问题：

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

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

 var d3 = require('d3'); 

Answer 2

只是觉得我会指出，从v3到v4的d3更新是相当具有破坏性的。 我遇到了类似的问题，直到我意识到d3代码在几乎所有情况下都发生了变化。

通过使用，我可以正常使用webpack导入d3（作为节点模块安装）

 import * as d3 from "d3"; 

之后，错误使得它看起来像d3没有被导入，但是这是因为我使用的是D3风格的代码。

例如：

 d3.layout.pie() 

现在简单地说：

 d3.pie() 

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