Допустим, у меня есть традиционная библиотека javascript, такая как google-charts, и я хотел включить ее в свой проект Polymer 3.0. Как бы я на самом деле сделал импорт?
Вот как я обычно это делаю: https://developers.google.com/chart/interactive/docs/quick_start
Обычно предпочтительнее версия такой библиотеки с модулем ES, если она доступна (например, на NPM), поскольку модули ES допускают встряхивание дерева (от Polymer CLI в данном случае), чтобы уменьшить размер выходных данных производственной сборки.
Модули загружаются в JavaScript с помощью import. ключевое слово. Если библиотека доступна в NPM, ее можно установить в ваш проект Polymer с помощью команды npm-install. Например, вы бы установили google-charts так:
npm install --save google-charts
Затем импортируйте этот пакет в свой код элемента:
import { GoogleCharts } from 'google-charts';
Пример:
import { PolymerElement } from '@polymer/polymer';
import { GoogleCharts } from 'google-charts';
class MyElement extends PolymerElement {
// ...
ready() {
super.ready();
GoogleCharts.load(/* ... */);
}
}
С другой стороны, если ESM недоступен, скрипт, скорее всего, является модулем AMD/UMD, который добавляет символы в глобальную область. В этом случае вы по-прежнему будете import файлом и получите доступ к глобальному файлу, как обычно, если бы вы использовали тег <script>.
Если скрипт не находится в NPM, вам придется скопировать файл локально в свой проект (и включить файл библиотеки в свой выпуск), а затем импортировать файл по пути. Например, если вы скопировали библиотеку в <root>/src/libs/google-charts.js, код элемента в <root>/src/components/Chart.html будет импортировать ее следующим образом:
import '../libs/google-charts'
Пример:
import { PolymerElement } from '@polymer/polymer';
import '../libs/google-charts' // adds GoogleCharts to global
class MyElement extends PolymerElement {
// ...
ready() {
super.ready();
GoogleCharts.load(/* ... */);
}
}
