如何將外部 JavaScript 導入 Polymer 3.0

Question

假設我有一個傳統的 javascript 庫，例如 google-charts，我想將它合並到我的 Polymer 3.0 項目中。 我實際上將如何進行導入？

這就是我傳統上的做法： https : //developers.google.com/chart/interactive/docs/quick_start

Answer 1

NPM 上的 ES 模塊

通常，如果可用（例如，在NPM 上），人們會更喜歡此類庫的 ES 模塊版本，因為 ES 模塊允許搖樹（在這種情況下通過Polymer CLI ）以減少生產構建輸出的大小。

模塊在 JavaScript 中使用import關鍵字加載。 如果在 NPM 上可用，則可以使用npm-install命令將該庫安裝在您的 Polymer 項目中。 例如，您可以像這樣安裝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(/* ... */);
  }
}

演示

非 ES 模塊（不在 NPM 上）

另一方面，如果 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(/* ... */);
  }
}