javascript - 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);

然后我添加了{ src: "~/plugins/csv-parse", mode: "client" }到我的 nuxt.config.js 中的插件数组(我只需要在客户端使用这个包)。
至于 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 操作，然后以某种方式把它交给你的客户端。不知道该怎么做。