Nuxt.js - 全局導入自定義 NPM 包

Question

Nuxt 的插件/模塊系統非常復雜，因此我無法完成這個非常簡單的任務，即使在 SO 上查看了其他一些答案之后也是如此。 我已經安裝了 NPM package csv-parse （在此處找到），然后我在項目的plugins目錄中創建了一個名為csv-parse.js的文件，我在其中放入了以下代碼：

import Vue from 'vue';
import CsvParse from 'csv-parse';
Vue.use(CsvParse);

然后我將{ src: "~/plugins/csv-parse", mode: "client" }添加到我的nuxt.config.js的插件數組中（我只需要使用這個 package 客戶端）。

至於 Nuxt 的文檔和其他 SO 答案會讓您相信，您現在應該能夠在您的組件中全局使用這個 package，但是沒有人關心如何在您的組件中使用它。 這是我嘗試過的：

// @/components/Hospitals/Crud.vue
...
<script>
  export default {
    methods: {
      parseFileData() {
        console.log('parser:', CsvParser);       // ReferenceError: CsvParser is not defined
        console.log('parser:', $CsvParser);      // ReferenceError: $CsvParser is not defined
        console.log('parser:', this.CsvParser);  // undefined
        console.log('parser:', this.$CsvParser); // undefined
      }
    }
  }
</script>
...

有人可以解開如何在 Nuxt 項目中全局使用自定義 NPM 包的奧秘嗎？

Answer 1

您很好地遵循了答案並在這里成功導入了 package IMO（僅在客戶端）。

對於您的主要問題，人們沒有解釋如何在全球范圍內使用它，因為它通常取決於 package 本身。 對於快速演示，這是我的vue-vee-validate.js文件

import Vue from 'vue'
import { ValidationProvider, ValidationObserver } from 'vee-validate'

export default ({ app }) => {
  Vue.component('ValidationObserver', ValidationObserver)
  Vue.component('ValidationProvider', ValidationProvider)
}

按照官方文檔，它應該像這樣導入並在我的 Nuxt 項目中像這樣使用（插件安裝后）

<ValidationProvider v-slot="v">
  <input v-model="value" type="text">
</ValidationProvider>

因此，即使初始設置不完全相同，因為您將其引入 Nuxt，最終結果也是相同的。 如果你能實現讓它在任何基本的 ES6 項目中工作，你可以在 Nuxt 中導入插件后使用相同的方式。

---

所以在這里，對於您的node-csv-parse ，如果您可以實現使其在NodeJS 項目中工作，您也可以在這里輕松使用它。 是的，你沒看錯，你的項目最初是針對 Node 的。 因此，它不應該在瀏覽器中工作。 您可以嘗試將它與Browserify一起使用，或者找到一個替代的（瀏覽器就緒的）package。

盡管如此，在節點中它應該按照文檔中的說明工作

var csv = require('csv');
var generator = csv.generate({seed: 1, columns: 2, length: 20});

因此，Browserify 在轉換為與瀏覽器兼容的包（並導入到您的csv-parse.js文件中）時應該以類似的方式幫助使用它。

---

PS：CSV 操作可能很繁重，可能會使用一些后端進行計算，然后發送到前端可能嗎？

PS2：Nuxt 最終仍然是一個 NodeJS 服務器，所以你可以只在服務器端運行你的 CSV 操作，然后以某種方式把它交給你的客戶端。 不知道該怎么做。