[英]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.