Vue - 导入没有导出的 npm 包

Question

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

包 (JSPrintManager - here) 只是一个 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

Answer 1

jspm.plugin.js

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

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

ma​​in.js

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

Vue.use(JSPM);

您现在可以在任何组件中以this.$JSPM 的身份访问JSPM

如果您想在组件之外使用它（例如，在商店中）并且希望它与 Vue 使用的实例相同，请将其从 Vue 中导出，位于 main.js

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

export const { $JSPM } = Instance

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

---

这就是 Vue 的方式。现在，平心而论，您的导入是为了将某些东西附加到您然后注入 Vue 的窗口对象的副作用而运行的这一事实并不是非常 Vue-ish。因此，在您的组件中，快速而肮脏的方法是：

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 的真实性，如果还没有，几秒钟后再次调用分配函数直到成功或达到您为其设置的最大尝试次数。