Nuxt.js - 全局导入自定义 NPM 包

Question

Nuxt 的插件/模块系统非常复杂，因此我无法完成这个非常简单的任务，即使在 SO 上查看了其他一些答案之后也是如此。我已经安装了 NPM 包csv-parse（找到了here），然后我在我的项目的plugins 目录中创建了一个名为csv-parse.js 的文件，我在其中放入了以下代码：

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

然后我在我的nuxt.config.js 的插件数组中添加了{ src: "~/plugins/csv-parse", mode: "client" }（我只需要在客户端使用这个包）。

就 Nuxt 的文档和其他 SO 答案而言，您现在应该能够在您的组件中全局使用这个包，但是没有人关心如何在您的组件中使用它。这是我尝试过的：

// @/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

您很好地遵循了答案，并在 IMO 此处成功导入了包（仅限客户端）。

对于您的主要问题，人们没有解释如何在全球范围内使用它，因为它通常依赖于包本身。快速演示，这是我的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)
}

按照官方文档，应该导入 like this 并在我的 Nuxt 项目中使用（插件安装后）

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

因此，即使由于您将其引入 Nuxt 而导致初始设置不完全相同，最终结果也是相同的。如果你能实现让它在任何基本的 ES6 项目中工作，你可以在 Nuxt 中导入插件后使用相同的方式。

---

所以在这里，对于您的node-csv-parse，如果您可以实现使其在NodeJS 项目 中工作，您也可以在这里轻松使用它。是的，你没看错，你的项目最初是针对 Node 的。因此，它不应该在浏览器中工作。您可能可以尝试将它与Browserify 一起使用，或者找到一个替代的（浏览器就绪的）包。

不过，在节点中它应该按照the docs 中的说明工作

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

因此，Browserify 在转换为与浏览器兼容的捆绑包（并导入到您的csv-parse.js 文件中）时应该有助于以类似的方式使用它。

---

PS：CSV 操作可能很繁重，可能会使用一些后端进行计算，然后可能会发送到前端？

PS2：Nuxt 最终仍然是一个 NodeJS 服务器，所以你可以只在服务器端运行你的 CSV 操作，然后以某种方式把它交给你的客户端。不知道该怎么做。