NUXT模块简介 - 重新审视
#javascript #vue #typescript #nuxt

大约两年前，我发表了有关与这个主题的文章 - >Introduction to Nuxt Modulesð
如果愿意，您可以检查一下here，但这可能有点过时，这就是为什么我决定今天创建一个更现代的版本。

我真的很喜欢模块的想法，这是个人贡献者能够将其brick添加到框架生态系统中的一种方式。为什么？纯粹是因为它是一个孤立的环境，您可以在私人存储库中创建并在不担心主框架存储库中破坏某些内容的情况。

，当您更精通模式时，您总是可以跳入主要存储库并在那里做出贡献（相信我，您可以抓住很多问题并帮助框架成长）

在本文中，我将重点介绍我为NUXT生态系统创建的模块，它们的工作方式以及您如何成为模块作者！

让我们跳入！

什么是模块？

我不会解释该模块的工作原理，因为我已经在上一篇文章中已经做到了，而且从那时起就没有太多变化。有趣的是，当我在2021年发表这篇文章时，NUXT上没有关于此主题的实际官方指南。因此，我的文章被用作有关创建NUXT模块的正式文档。

但是今天，有一个MUXT模块作者指南，您可以查看here

Nuxt Module Author

对于那些来自NUXT 2的人，有一个非常好的信息兼容性

nuxt 3使用 @nuxt/kit自动包装器具有NUXT 2个模块的基本向后兼容层。但是通常需要采取一些步骤，以使模块与NUXT 3兼容，有时需要使用NUXT桥来兼容。

。

关于模块本身，实际上有很多！

Nuxt Modules

查看官方页面here

有关创建NUXT模块的内容

关于构建和维护NUXT模块的内容，实际上您可以查看许多视频和教程。但是其中两个基本上是在从头开始显示的。

首先是我在vue.js全球峰会上录制了有关nuxt 3的模块的录制，您可以在下面查看：

基本上，它可以指导您构建ngrok的NUXT模块（该工具允许您从Web访问Localhost应用程序）。非常简单的一个，但那时就没有任何内容，所以这样的逐步教程真的很有用。

，接下来，我在最近一起参加的vue.js Live Conference上录制了@lihbr的演讲。您可以检查视频here

在其中，露西（Lucie）将指导您完成类似的构建模块的过程，并展示如何成为一名出色的维护者！

更深入地了解NUXT模块的结构

对于这种更深的外观，我将使用我的MEDUSA模块将其用于NUXT，因为它相对容易解释，并且涵盖了几个概念，这些概念在构建模块时对您很有用。下面，您可以看到模块的文件夹和文件结构：

Nuxt Module File Structure

让我们谈谈此存储库中的每个有意义的文件夹 /文件。< / p>

.github

此文件夹包含问题和PR模板以及整个CI过程，包括测试，覆盖，构建项目。它更适合模块上工作的维护者部分。

.stackblitz

这是我最近将Stackblitz模板保留在模块存储库中的想法，这样就可以更轻松地将其与模块的更改保持最新。它基本上包含具有实现的模块的简单NUXT应用程序。在readme.md中，有一个指向StackBlitz的链接，它将克隆回购并开始快速发现项目。

docs

此文件夹包含生成使用docus构建的文档页面所需的所有文件，您可以查看here。对于模块存储库而言，这不是必需的

playground

此文件夹包含带有模块文件的直接链接的本地NUXT应用程序。它非常适合本地测试和开发。有时我会遇到疑问playground和.stackblitz有什么区别。我解释说，游乐场是一个本地测试项目，而.stackblitz是一个远程测试项目（纯粹是因为操场上有一个与本地项目的链接，而.stackblitz从NPM下载了模块）

src

包含模块的所有源代码。它必须具有一个或多或少的module.ts文件，如以下内容：

import { defineNuxtModule, addPlugin, createResolver, addImportsDir, extendViteConfig, addTemplate } from '@nuxt/kit'
import { fileURLToPath } from 'url'
import { defu } from 'defu'
import { Config } from '@medusajs/medusa-js'

export type ModuleOptions = Config & { global?: boolean, server: boolean }

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'nuxt-medusa',
    configKey: 'medusa'
  },
  defaults: {
    baseUrl: 'http://localhost:9000',
    maxRetries: 3,
    global: true,
    server: false,
  },
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    if (options.global) addPlugin(resolver.resolve('./runtime/plugin'))

    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
    nuxt.options.build.transpile.push(runtimeDir)
    nuxt.options.build.transpile.push("@medusajs/medusa-js");
})

此module.ts文件也是您的模块可以包含的所有内容的包装器，例如：

  • 自动成分组件
  • 自动成型的组合
  • 服务器实用程序
  • 插件
  • CSS
  • 更多！

实际上，您可以在模块中可以做很多事情，因此威胁它像是一个有用的包装器，可以在许多情况下重复使用该功能。

test

此文件夹包括使用Vitest和Playwright等工具，包括与模块自动测试有关的所有文件。在这里，您可以编写测试用例并在每次拉请求 /合并后从CI运行。< / p>

其他文件

，这里还有许多其他文件用于配置linter/pretiers/npm/git/等。我通常只是将它们从一个模块复制/粘贴到另一个模块，然后将它们调整为一个新项目。

奖金 - 我创建的模块

由于我使用模块的积极经验，我想一个人自己构建和维护一个模块。我非常喜欢它，以至于今天我是四个NUXT模块的维护者：

  • Security-基于OWASP前10和头盔的NUXT的安全模块。没有配置，它允许您具有更安全的Web应用程序，但它也带有可定制性选项，因此您可以对其进行调整以符合您的需求。
  • Algolia-使用Algolia相关功能，例如Algoliasearch，InstantSearch，DocSearch，并使用单个软件包。
  • Cloudinary-通过使用简单的组件和组合直接从Cloudinary
    • 中获取图像，为现代网络提供优化的表演图像
  • Medusa-轻松从NUXT应用程序连接到Medusa无头商务平台。

因此，如您所见，我已经创建了其中很少。如果您喜欢它们中的任何一个，请随时添加github开始以使模块生长！