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

Posted 2023-02-22

【中文标题】Nuxt.js - 全局导入自定义 NPM 包

【英文标题】：Nuxt.js - Globally import custom NPM packages

【发布时间】：2021-06-02 18:29:48

【问题描述】：

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 包的奥秘吗？

【问题讨论】：

简单解释一下：模块是由社区提供的官方包（通常维护良好），即插即用。这里有一个列表：modules.nuxtjs.org（它可能没有全部但仍然有很多）。插件提供了一种在 Vue 实例启动之前将任何类型的 JS 代码（Vue 或 vanilla）导入项目的方法。基本上是导入任何不是为 Nuxt 设计的代码。

【参考方案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 操作，然后以某种方式把它交给你的客户端。不知道该怎么做。

【讨论】：

感谢您抽出宝贵时间。最后我放弃了，只是在本地导入它。至于在客户端执行 csv 操作 - 问题是我要对数据集执行附加操作，而执行附加操作的功能仅在客户端可用，在服务器上不可用。