如何在 Rails 6 中使用 Webpacker 加载 d3.js？

Question

我正在尝试在 Rails 6 应用程序中使用 d3.js 和 Webpacker，我得到 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。

Answer 1

您需要将 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

Answer 2

这是最适合我的方法（添加 2 个选项，简单高效）：

1.通过 yarn

添加包

yarn add d3

简单

加载整个 d3 库。

2。 config/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。 config/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
    ...
  }
)

如何在 Rails 6 中使用 Webpacker 加载 d3.js？

How can I load d3.js with Webpacker in Rails 6?

javascript

ruby-on-rails

d3.js

webpacker