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

Question

我正在尝试在使用Webpacker的Rails 6应用程序中使用d3.js，但是我收到了“Uncaught ReferenceError：d3未定义”的错误。

我使用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文件中，我添加了以下内容来确保它正常加载：

在另一个JS文件中，我添加了以下内容作为一种确保其正确加载的方式：

...
console.log("test");
const div = d3.selectAll("div");
...

我运行了rails s来重新启动Rails服务器，然后重新加载页面。

日志语句出现在控制台中，但是d3线条返回未捕获的引用错误：d3未定义。

- Andrew

---

你执行了 npm install 吗？ - shirakia

@shirakia，既然这是一个Rails应用程序，我需要吗？ - Andrew

在另一个JS文件中，你导入了d3变量吗？在任何引用该变量的Webpack捆绑文件中，您都必须这样做。 - rossta

@rossta，如果你的意思是这个，我在/app/javascript/packs/application.js中添加了require("d3")。 - Andrew

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

- rossta

---

谢谢！有没有一种方法可以全局导入它，这样我就不必在每个需要引用d3的文件中都导入它了？那样做是否明智？将会有数十个文件使用d3。 - Andrew

那是主观的。我不愿意这样做，因为它会强制开发人员明确每个模块中的依赖关系。 - rossta

如果这个解决方案对您有用，请将答案标记为正确。 - rossta

这取决于你，但这是我在我的应用程序中会做的事情。在基于模块的JS应用程序中，每个文件以一个或多个导入语句开头是非常典型的。 - rossta

由于d3本身是模块化的，因此您应该开始仅导入给定文件所需的部分。例如：import { selectAll } from 'd3'或import { selectAll } from 'd3-selection'。 - rossta

Answer 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
    ...
  }
)

- aruanoc