javascript - How do I develop a plugin for a library when including it as a peerDependency gives me no concrete implementation to use?

Question

The Requirements:

I am developing a plugin for popularLibrary.js. The plugin:

• Will not work, at all, if popularLibrary.js is not present
• Works with v1.x.x of popularLibrary.js
• Must work if it's included as a dependency in a project that uses popularLibrary.js
• Must work if it's included as a packaged source alongside popularLibrary.js

In example:

<script src="https://some-cdn.com/popularLibrary.js"></script>
<script src="https://some-cdn.com/myMagicalPlugin.js"></script>

The Problems:

• When I set popularLibrary.js as a peerDependency, it is no longer downloaded on npm install. How do I continue to develop my plugin when it needs to import and utilize functionality that exists in popularLibrary.js?
• Not everyone uses a build step. If someone adds the minified sources for popularLibrary.js and myMagicalPlugin.js, how does that peerDependency resolve? Do I need to do anything extra/special in either library to support this scenario?

Answer 1

It's been a while since I originally asked this. I ultimately added that same peerDependency as a devDependency, as it's needed to develop and test the application.

Ideally, you program to some contract/interface to decouple the plugin from the primary library as much as possible. In a more concrete example, I have two WebPack scripts.

Script 1: Bundles the library and uses excludes key for any direct dependencies on the primary library (should be avoided if you can help it, ie. Decoupled)

Script 2: For a dev application, uses the primary library, and imports the plugin from source. Used with webpack-dev-server for development/testing

You can use WebPackBundleAnalyzer to make sure you're not accidentally bundling peerDeps