импортировать библиотеку в один файловый компонент vue.js

Question

Мне нужно импортировать библиотеку в моем компоненте vue, в документации я объясняю, как установить ее с помощью npm (уже делаю этот шаг), но не как импортировать ее в компонент vue, это способ, которым она объясняет как использовать файлы:

<link href="node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="node_modules/webdatarocks/webdatarocks.js"></script>

и это способ создания библиотеки:

<script>
var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    report: {
        dataSource: {
            filename: "https://cdn.webdatarocks.com/data/data.csv"
        }
    }
});
</script>

Так, как лучше всего назвать это в моем компоненте?

Answer 1

Это немного тяжело.

Библиотека не разработана в модульной системе, поэтому решение заключается в том, чтобы импортировать файл js как глобальный.

Хорошая библиотека будет похожа на const WebDataRocks = require("WebDataRocks"); или с импортом, но библиотека сделана только для конечного клиента.

Первая часть - добавление файла JS в глобальный веб-клиент

Чтобы использовать WebDataRocks, вы должны получить глобальную переменную, чтобы получить глобальную переменную, которую вы должны инъектировать, как обычный javascript в html, но с веб-пакетом.

Вот решение для этого Webpack - Как загрузить немодульные скрипты в глобальную область видимости | окно

Вы должны сделать это для webdatarocks.toolbar.min.js и webdatarocks.js

Вторая часть - Добавить CSS

У вас есть несколько вариантов, я нашел простой способ сделать это - использовать require в вашей <script> зоне:

require('../node_modules/webdatarocks/webdatarocks.js')

Удачи! ?

Если что-то не получается, проверьте пути и сообщите нам больше информации об этом

---

Альтернативное решение (но хуже)

Если вы собираетесь использовать этот скрипт в интернет-системе, вы можете вставить скрипт и CSS в HTML. Для этого сделайте:

1. Открыть index.html
2. Добавьте этот код в раздел заголовка:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

3. Перестройка

Извлечено из примера реакции WebDataRocks

Внимание! это небезопасно ☣ ⚠

• Сделайте это, только если вы уверены, что это значит
• Если Webdatarocks CDN не работает, ваше приложение также не будет работать.

Надеюсь, это поможет:)