javascript - Vue - 导入没有导出的 npm 包

Question

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

包 (JSPrintManager - here) 只是一个 没有导出 的 JavaScript 文件。因此，我不能使用:

从“jsprintmanager”导入 {JSPM}

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

从“jsprintmanager”导入 JSPM

从“../../node_modules/jsprintmanager/JSPrintManager”导入 * 作为 JSPM

从“../../node_modules/jsprintmanager/JSPrintManager.js”导入 * 作为 JSPM

我是不是找错了树？

如果无法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 的方式。现在，平心而论，您的导入是为了将某些东西附加到您随后注入(inject) 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 的真实性，如果还没有，请调用作业几秒钟后再次运行，直到成功或达到您为其设置的最大尝试次数。