Каждая импортированная функция отображается как "неопределенная", хотя импорт явно выполняется. - PullRequest
Новая
       7

Каждая импортированная функция отображается как "неопределенная", хотя импорт явно выполняется.

2 голосов
/ 09 июля 2020

Я скачал d3 отсюда: https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js и включил его в свою /static папку.

/ static / graph. js 

import * as d3 from "/static/d3.js"
export function graph() {
    d3.select("#classname");
    console.log("Selected");
}

index. html

<html>
    <body>
        <script type="module">
            import {graph} from "/static/graph.js"
            graph()
        </script>
    </body>
</html>

Но я получаю ошибку d3.select is not a function.

  • Настройка папки /static звуковая; если я изменю строку, ссылающуюся на любой из файлов. js, я (соответственно) встречусь с TypeError: Error resolving module specifier: ... То есть со строками, как они есть, мы сможем увидеть и обработать файлы соответствующим образом (далее: ответ из сети - 304, что указывает на то, что кэшированные файлы соответствуют тому, что обслуживает сервер).
  • D3 загружается каким-то образом . Если я помещу debugger; внутри функции graph(), go в dev. console и введите d3, я могу просмотреть список автозаполнения всех функций, определенных в D3 (включая select). Но что-то вроде d3.select возвращает Undefined. Итак, D3 загружается достаточно для автозаполнения, но все оказывается неопределенным. Сама переменная имеет тип Symbol(Symbol.toStringTag): "Module", который задокументирован здесь (хотя я не уверен, что делать с указанной документацией)
  • С другой стороны, помещая оператор debugger; в index.html показывает, что d3, похоже, работает так, как задумано, хотя он не импортируется здесь.

Почему d3.select не является функцией?

1 Ответ

3 голосов
/ 09 июля 2020

Я считаю, что проблема здесь в том, что вы пытаетесь загрузить модуль, но есть модули ES6 и модули UMD. D3. js - это модуль UMD.

Модули UMD «загружаются» для подключения к «оконному» или «глобальному» объекту. Модули UMD, развивающиеся в то время, когда именно то, как будут работать «Модули», постоянно менялись, в любом случае это очень увлекательная тема c, и я бы порекомендовал ее когда-нибудь почитать ...

Итак, вместо 

import * as d3 from "/static/d3.js"

вы должны сделать 

import "/static/d3.js"

Теперь вы сможете использовать D3, так как он был прикреплен к объекту «окно».

Так и с при этом ваша установка будет выглядеть так: 

// index.html
<html>
    <body>
        <script type="module">
            import {graph} from "/static/graph.js"
            graph()
        </script>
    </body>
</html>

и 

// static/graph.js
import "/static/d3.js" // Now loaded as UMD module
export function graph() {
    d3.select("#classname");
    console.log("Selected");
}

Это будет работать.

В качестве примечания, это часть Модуль D3, который выполняет начальную загрузку и присоединяет D3 к объекту «окно». 

...
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
        (global = global || self, factory(global.d3 = global.d3 || {})); // <-- the "magic" part.
}(this, function (exports) { 
     /* 
          THE REST OF THE MODULE SOURCE GOES HERE 
          all 18,561 lines of it...
     */ 
}));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...