如何将外部 JavaScript 导入 Polymer 3.0

Question

假设我有一个传统的 javascript 库，例如 google-charts，我想将其合并到我的 Polymer 3.0 项目中。我实际上将如何进行导入？

这是我的传统做法：https://developers.google.com/chart/interactive/docs/quick_start

Answer 1

NPM 上的 ES 模块

通常情况下，人们会更喜欢此类库的 ES 模块版本（如果可用）（例如，在本例中为 NPM), since ES modules allow tree shaking (by Polymer CLI）以减小生产构建输出的大小。

使用 import keyword. If available on NPM, the library could be installed in your Polymer project with the npm-install 命令在 JavaScript 中加载模块。例如，您可以像这样安装 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(/* ... */);
  }
}

demo

非 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(/* ... */);
  }
}

如何将外部 JavaScript 导入 Polymer 3.0

How to import external JavaScript into Polymer 3.0

polymer

polymer-3.x

NPM 上的 ES 模块

非 ES 模块（不在 NPM 上）