如何将外部 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(/* ... */);
  }
}