我正在尝试在带有 Webpacker 的 Rails 6 应用程序中使用 d3.js，但出现 Uncaught ReferenceError: d3 is not defined。
我使用 yarn add d3 添加了 d3。
我的 package.json 文件:
{
"name": "example",
"private": true,
"dependencies": {
...
"d3": "^5.15.0",
...
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.1.14"
}
}
/app/javascript/packs/application.js:
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("d3")
...
在另一个 JS 文件中，我添加了以下内容以确保其正确加载:
...
console.log("test");
const div = d3.selectAll("div");
...
我运行 rails s 重新启动 Rails 服务器，然后重新加载页面。
日志语句出现在控制台中，但 d3 行返回 Uncaught ReferenceError: d3 is not defined。
最佳答案
您需要将 d3 作为变量导入，以便能够在 Webpack 捆绑的 JS 文件中引用它:
import * as d3 from "d3"
window.addEventListener('DOMContentLoaded', () => {
d3.selectAll("div")
.append("p")
.text("Hello, World!")
})
这是一个演示:https://github.com/rossta/rails6-webpacker-demo/compare/example/d3
关于javascript - 如何在 Rails 6 中使用 Webpacker 加载 d3.js？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60690040/