Vue - Import npm package that has no exports

user_2581585 0
Viewed 942

I am trying to import an npm package into a Vue component.

The package (JSPrintManager - here) is just a JavaScript file with no exports. Consequently, I cannot use:

import { JSPM } from "jsprintmanager"

I have also had no success with the following:

import JSPM from "jsprintmanager"

import * as JSPM from "../../node_modules/jsprintmanager/JSPrintManager"

import * as JSPM from "../../node_modules/jsprintmanager/JSPrintManager.js"

Am I barking up the wrong tree?

If there is no way to import an npm package that is not a module, is there another way to load the relevant JavaScript file (currently residing in my node-modules directory) into my component?

I am using the Vue CLI

npm vue.js javascript
1 Answers

jspm.plugin.js

import * from '../../node_modules/jsprintmanager/JSPrintManager';

export default {
  install(Vue) {
    Vue.prototype.$JSPM = window.JSPM
  }
}

main.js

import Vue from 'vue'
import JSPM from './jspm.plugin';

Vue.use(JSPM);

In any of your components you can now access JSPM as this.$JSPM

If you want to use it outside of your components (say, in store) and you want it to be the same instance as the one Vue uses, export it from Vue, in main.js

const Instance = new Vue({
  ...whatever you have here..
}).$mount('#app');

export const { $JSPM } = Instance

Now you can import { $JSPM } from '@/main' anywhere.

That would be the Vue way. Now, in all fairness, the fact your import is run for the side effect of attaching something to the window object which you then inject into Vue is not very Vue-ish. So the quick and dirty way to do it would be, in your component:

import * from '../../node_modules/jsprintmanager/JSPrintManager';

export default {
  data: () => ({
    JSPM: null
  }),
  mounted() {
    this.JSPM = window.JSPM;
    // this.JSPM is available in any of your methods 
    // after mount, obviously
  }
}

The main point of the above "simpler" method is that you have to make the assignment after the page finished loading and running the JSPM code (and window.JSPM has been populated).

Obviously, if you disover it sometimes fails (due to size, poor connection or poor hosting), you might want to check window.JSPM for truthiness and, if not there yet, call the assignment function again after in a few seconds until it succeeds or until it reaches the max number of tries you set for it.

user_18916770
Related