如何使用一个电容器插件意味着要导入一个香草js应用程序

Question

我目前正在努力想办法解决这个问题。

所以，我在一个普通的JS环境中工作，没有使用电容器的webpack设置，我想使用这个电容器插件：https://github.com/CodetrixStudio/CapacitorGoogleAuth

然而，要使用这个插件，我必须将包import放入我的客户端代码中。

以下是我尝试过的：

1. 取消包装类型＝"；模块"：然而，移动设备对浏览器的支持并不是很好。这个应用程序将提供给大量用户
2. 使用browserify+esmify将插件代码捆绑到我可以用<script>标签导入到我的index.html中的东西中。不起作用

我的最后一个想法是设置webpack为我捆绑所有内容，类似于browserify方法和import。然而，在我完成所有这些之前，我想联系这里，看看你们是否有其他想法。

有没有办法从window访问这个插件？

Answer 1

所以我通过阅读本文找到了实现这一点的方法：https://medium.com/@SmileFX/a-完整的指南-构建-a-电容器js-应用程序-单个-图片-javascript-and-webpack-37d00f11720d

基本上，您有一个www/js目录(vanilla-js(和一个src目录(ES6/import代码(。然后将webpack配置为在您的www/js/目录中输出。注意：您希望香草js代码可以访问的任何变量都必须显式存储在window对象中。

示例

/src/toBeWebpacked.js

import Module from "your-module"
window.doSomething = () => Module.doSomething()

/www/js/vanilla.js

const useModuleCode = () => {
// use code from webpacked ES6 JavaScript here
return window.doSomething();
}