Vue - 導入沒有導出的 npm package

Question

我正在嘗試將 npm package 導入 Vue 組件。

package（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 package ，是否有另一種方法可以將相關的 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);

在您的任何組件中，您現在都可以訪問JSPM作為this.$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 object 然后您將其注入 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的真實性，如果還沒有，請在幾秒鍾后再次調用分配 function 直到成功或者直到它達到您為其設置的最大嘗試次數。