Vue-导入没有导出的npm包

Question

我正在尝试将一个npm包导入Vue组件。

包(JSPrintManager-这里(只是一个JavaScript文件，没有导出。因此，我不能使用：

import { JSPM } from "jsprintmanager"

我在以下方面也没有成功：

import JSPM from "jsprintmanager"

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

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

我是不是找错树了？

如果无法将非模块的npm包import加载到组件中，是否有其他方法将相关的JavaScript文件(当前位于我的node-modules目录中(加载到我的组件中？

我正在使用Vue CLI

Answer 1

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);

在您的任何组件中，您现在都可以作为this.$JSPM访问JSPM

如果你想在组件之外使用它(比如说在商店中(，并且你想让它与Vue使用的实例相同，那么在main.js中从Vue导出它

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

现在您可以在任何地方使用import { $JSPM } from '@/main'。

---

这将是Vue的方式。现在，公平地说，运行导入是为了给窗口对象附加一些东西，然后将其注入Vue，这一事实并不是很Vue风格。因此，快速而肮脏的方法是，在您的组件中：

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
}
}

以上"；"更简单"；方法是，您必须在页面完成加载和运行JSPM代码(并且已经填充了window.JSPM(之后进行赋值。

显然，如果您有时会因为大小、连接不良或主机不好而拒绝它，您可能需要检查window.JSPM的真实性，如果还没有，几秒钟后再次调用分配函数，直到它成功或达到您为其设置的最大尝试次数。