[英]How can I load d3.js with Webpacker in Rails 6?
我正在尝试在带有 Webpacker 的 Rails 6 应用程序中使用 d3.js 并且我收到Uncaught ReferenceError: d3 is not defined
。
我使用yarn add 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
这是最适合我的方法(添加 2 个选项,简单高效):
1.通过yarn
添加包
yarn add d3
简单
加载整个 d3 库。
2. 配置/webpack/environment.js
为包创建别名:
const aliasConfig = {
'd3': 'd3/dist/d3.js'
};
environment.config.set('resolve.alias', aliasConfig);
别名必须指向包的主 JS 文件,相对于node_modules
文件夹。
3. app/javascript/packs/application.js
添加导入:
import "d3"
高效的
仅加载您将要使用的功能。
2. 配置/webpack/environment.js
无需使用此工作流程添加别名。
3. app/javascript/packs/application.js
从 d3 子模块导入特定函数,并将它们分配给全局window.d3
对象:
import { select, selectAll } from 'd3-selection'
import { scaleLinear } from 'd3-scale'
import { min, max } from 'd3-array'
...
window.d3 = Object.assign(
{},
{
select,
selectAll,
scaleLinear,
min,
max
...
}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.