polymer - 如何将外部 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上），因为 ES 模块允许摇树（在这种情况下通过Polymer CLI）来减少生产构建输出的大小。

import使用关键字在 JavaScript 中加载模块。如果在 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(/* ... */);
  }
}

演示

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