Как я могу загрузить d3. js с Webpacker в Rails 6? - PullRequest
Новая
       39

Как я могу загрузить d3. js с Webpacker в Rails 6?

1 голос
/ 15 марта 2020

Я пытаюсь использовать d3. js в приложении Rails 6 с Webpacker и получаю Uncaught ReferenceError: d3 is not defined.

Я добавил d3, используя 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, затем перезагрузил страницу.

Оператор log появляется в консоли, но строка d3 возвращает Uncaught ReferenceError: d3 is not defined.

1 Ответ

2 голосов
/ 15 марта 2020

Вам необходимо импортировать d3 как переменную, чтобы иметь возможность ссылаться на нее в файле JS, входящем в комплект поставки Webpack: 

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

...