Javascript 将Webpack与d3、jQuery和引导一起使用

嘿，伙计们

总网页包（和es6/现代前端实践）新手在这里，所以很抱歉，如果这是一个愚蠢的问题

我正在尝试使用现代web开发标准构建一个d3 dataviz项目，但在启动和运行它时遇到了很多麻烦——特别是，当我启动本地webpack开发服务器时，我遇到了一个奇怪的未捕获（承诺）类型错误，并且我的d3元素都没有显示。我确信这是我忽略的一件非常愚蠢的事情，但我一直在互联网上搜索什么感觉像永远，不幸的是没有取得任何进展。任何指导都将如此，如此感激

充分披露：这是一门大学课程，但我的老师对现代webdev标准一无所知，所以我完全自主选择以这种方式开发它。我只是想在现代JS的世界里给自己一次试炼，现在我很后悔，哈哈

如果您需要查看任何其他移动部件，正在进行的工作项目正在进行中，如果您有任何问题，请随时通知我！非常感谢

package.json

“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“构建”：“webpack--progress-p”，
“观察”：“网页——进度——观察”，
“开始”：“网页包开发服务器--打开”
},
“依赖项”：{
“引导”：“^4.0.0”，
“d3”：“^5.0.0”，
“d3pie”：“^0.2.1”，
“jquery”：“^3.3.1”，
“popper.js”：“^1.14.1”
},
“依赖性”：{
“巴别塔核心”：“^6.26.0”，
“巴别塔加载器”：“^7.1.4”，
“巴别塔预设环境”：“^1.6.1”，
“css加载器”：“^0.28.11”，
“样式加载器”：“^0.20.3”，
“网页包”：“^4.2.0”，
“webpack cli”：“^2.0.13”，
网页包开发服务器“^3.1.1”
}

webpack.config.js

var webpack=require（'webpack'）；
module.exports={
条目：'./index.js'，
输出：{
文件名：“bundle.js”
},
插件：[
新的webpack.ProvidePlugin({
$：“jquery”，
jQuery：“jQuery”，
“window.jQuery”：“jQuery”，
d3:‘d3’
})
],
模块：{
规则：[
{
测试：/\.js$/,，
排除：/node_模块/，
使用：{
加载器：“巴别塔加载器”，
选项：{
预设：['env']
}
}
}
]
},
模块：{
规则：[
{
测试：/\.css$/,，
用法：['style-loader'，'css-loader']
}
]
}
};

index.js（仅限导入）

导入'bootstrap/dist/js/bootstrap.min.js'；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“jquery”导入美元；
从“d3”导入*作为d3；
输入‘d3pie’；

.babelrc

{
“预设”：[“环境”]
}

问题在于d3版本5中的

d3.csv

函数（您在项目中使用）使用承诺而不是回调来获取最终数据。以下是调用函数的方式：

d3.csv("thanksgiving-2015-poll-data.csv").then((data) => {
  var thanksCSV = data;
  // ...

当你把它叫做

d3.csv("thanksgiving-2015-poll-data.csv", (data) => {

这只是每一行上的一个映射函数——参数应该是一行，而不是整个行数组

但是您还有另一个问题-您的

导入'd3pie'

不提供要使用的

d3pie

构造函数。您的导入语句应该如下所示：

从“d3pie”导入d3pie

但是还有另一个问题——d3pie需要定义
window.d3
，而您还没有这样做。因此，在您的导入下面，添加：

window.d3=d3

然后，饼图将正确加载。
描述TypeError并显示它出现的行周围的代码。@CertainPerformance稍后在index.js文件中出现：“Uncaught（in promise）”TypeError:无法读取属性“感恩节晚餐通常供应哪种类型的馅饼？请选择所有适用的。-未定义的Apple”（您可以在此处查看）[但这一定与webpack系统有关，因为此代码在d3沙盒等中工作。该错误和文件是您问题的关键-您的问题可能与您发布的元设置无关，因此您可能应该编辑您的问题以反映这一点。看起来问题出在
d3.csv中(“感恩节-2015-poll-data.csv”，函数（数据）{
，
数据
在运行脚本时没有范围为0到1057的标记。（可能检查它的长度？检查它的类型，确保它是数组？）@当然性能我不太确定这与发布的元设置无关，因为代码在html页面上运行得非常完美，jQuery和D3都是通过各自的CDN引入的。这就是为什么我认为这与webpack准备页面中提供的实际“bundle.js”文件的方式有关。谢谢详细的反馈就到此为止。我继续胡闹，并让一些图表发挥作用！我想我必须将所有内容都放在index.js中，加上d3pie构造函数绝对是个错误。再次感谢——非常感谢您的帮助。