How to use a capacitor plugin meant to be imported in a vanilla js app

Question

I'm currently pulling hairs trying to figure out how to go about this.

So, I'm working in a vanilla JS environment with no webpack setup served with capacitor and want to use this capacitor-plugin: https://github.com/CodetrixStudio/CapacitorGoogleAuth

However, to use this plugin I have to import the package into my client code.

Here's what I've tried:

1. Unpkg type="module": however browser support in mobile isn't that great. And this app will be served to a ton of users
2. Using browserify + esmify to bundle the plugins code into something I could import with a <script> tag into my index.html. Didn't work

My last thought is to setup webpack to bundle everything for me, similar to the browserify approach and import that. However before I go through with all of that I wanted to reach out here to see if you guys had any other ideas.

Is there a way to access this plugin from window maybe?

Thanks!

Answer 1

so I figured out the way to go about this by following this article: https://medium.com/@SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d

Basically you have a www/js directory (vanilla js), and a src directory (ES6/import code goes). You then configure webpack to output in your www/js/ directory. Note: Any variable you want accessible to your vanilla js code must be explicitly stored in the window object.

Example

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