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"

我是否走错了方向？

如果没有办法 import 一个不是模块的npm包，那么有没有其他方法可以将相关的JavaScript文件（目前位于我的node-modules目录中）加载到我的组件中？

我正在使用Vue CLI。

- Alex Webster

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的方式。但是，公平地说，你的导入实际上是为了将某些东西附加到window对象上，并将其注入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的真实性，并在几秒钟后再次调用赋值函数，直到成功或达到您设置的最大尝试次数为止。

- tao

---

非常感谢您提供的全面回复。实际上，JSPrintManager团队已经在过去24小时内更新了他们的软件包，以包括导出功能，因此我现在可以使用 import JSPM from "jsprintmanager/JSPrintManager.js" 但无论如何，您的答案仍然非常有帮助。 - Alex Webster