将 Capacitor Community 插件导入 vanilla js 脚本

Question

我有一个用纯 javascript（index.html、script.js）编写的基本应用程序，我将其放入 CapacitorJs 项目中让我创建 ios/android 应用。即使在我的 phone.

上也能正常工作

但现在我正在尝试使用电容器社区插件 (@capacitor-community/contacts)，但我需要像这样将其导入 script.js

import { Contact, Contacts, NewContact } from '@capacitor-community/contacts';

由于我没有使用打字稿，所以它显然会引发错误。

我怎样才能让它发挥作用？

我试图通过 index.html 上的 <script type="module"> 导入它，并将其分配给 js 全局 window 变量以在我的 script.js 但它不起作用。
我还尝试将我的 scripts.js 转换为打字稿并使用以下配置对其进行编译：

{
  "target":"es5",
  "module":"es2015",
  "moduleResolution:"node"
}

为了让它工作，必须将导入字符串更改为： import { Contact, Contacts, NewContact } from '../../nodes_modules/@capacitor-community/contacts';

但是我在控制台上收到一条错误消息 TypeError: 'text/html' is not a valid Javascript MIME type

  "target":"commonjs",

但是在浏览器中无法识别“定义”时出现错误。

我也知道 "bundledWebRuntime": true，它基本上将电容器核心文件编译成 .js，然后导入到 index.html。但它不包括社区包，所以它不是解决方案。

Answer 1

与打字稿无关。您的项目必须声明使用 ES 模块，才能使用 import 等功能。我不太清楚你的确切设置，但如果你有 package.json，请尝试将其添加到其中：

{
  ...
  type: "module",
}

如果您只有一个基本设置，即 html 页面在脚本标记中包含一个 js 文件，您应该能够通过将 js 文件声明为模块来使其正常工作，如下所示：

<script type="module" src="main.js"></script>

Import Capacitor Community plugin into a vanilla js script