模块是在引导next时顺序调用的函数。框架在继续之前等待每个模块完成。通过这种方式,模块可以自定义项目的几乎任何方面。next模块可以被合并到npm包中。这使得它们易于跨项目重用和与社区共享。
你是否曾经在做某件事时遇到了错误,或者只是需要得到某人的批准?有几个选项可以实现这一点,例如部署应用程序或创建<一个href="https://codesandbox.io" rel="nofollow noopener noreferrer" target="_blank">代码沙盒一个>.但是另一个选择是共享localhost,这样当您在dev模式下进行实时更改时,任何拥有链接的人都可以看到它,无论它们在哪里。我们可以用<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">俄罗斯一个>为了达到这个目的。
让我们创建一个使用<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">俄罗斯一个>这样,当您运行dev命令时,可以在Nuxt CLI中看到一个公共URL。
此模块已经创建并部署,您可以通过安装<一个href="https://ngrok.www.lycasleep.com" rel="nofollow noopener noreferrer" target="_blank">@nuxtjs / ngrok模块一个>.您还可以通过签出我们的<一个href="//www.lycasleep.com/examples/modules-internal">代码沙盒演示一个>.但是,如果你有兴趣了解它是如何创建的,或者想创建自己的模块,那么继续阅读。
ngrok将创建一个http-https-tcp隧道。查看<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">ngrok npm包一个>更多细节。我们需要能够连接到一个ngrok端口时,numxt服务器正在监听。一旦我们得到了一个公共的URL,我们就想把它打印到Nuxt CLI上,这样我们就可以轻松地单击它来打开和共享它。
要在我们的应用程序中使用自定义模块,我们需要创建一个模块文件夹(如果你还没有的话)。让我们在里面创建一个名为ngrok的文件夹,并向其中添加一个index.js文件。您可以使用编辑器创建这些文件夹和文件,或者使用下面的命令。
mkdir模块模块/ ngrok触摸模块/ngrok/index.js
为了使用我们的模块,我们需要通过将它添加到<一个href="//www.lycasleep.com/docs/2.x/directory-structure/modules/">构建模块一个>我们的numxt.config.js文件
文件。BuildModules只在开发和构建时被导入,这对于我们的模块来说是完美的,因为我们只需要它在开发模式下工作。
出口默认的{构建模块:[“~/modules/ngrok”]}
因为我们将使用<一个href="https://www.npmjs.com/package/ngrok" rel="nofollow noopener noreferrer" target="_blank">ngrok npm包一个>我们需要作为dev依赖项安装。
纱线添加- - - dev ngrok
npm公司安装- - - dev ngrok
现在我们已经安装并注册了所有的东西,我们可以继续创建我们的模块了。我们要做的第一件事就是从我们的国家进口韩国node_modules
文件夹到我们的索引.js
我们的ngrok模块的文件。
进口俄罗斯从“ngrok”
然后,我们可以使用export default创建一个函数,该函数允许我们在另一个文件中使用该函数。
进口俄罗斯从“ngrok”出口默认的功能(){}
在这个函数中,我们可以先对numxt进行解构,使其等于这
,也就是说我们不用写了这个.nuxt
每次我们提到next。
进口俄罗斯从“ngrok”出口默认的功能(){常数{努克斯}=这//我的下一个模块代码在这里}
我们只想在开发模式下运行ngrok,而不想在生产模式下运行,那么我们该怎么做呢?
首先让我们登录到控制台文本选项
所以我们可以看到所有的下一步选择。这是numxt.config.js文件
与默认值混合。
进口俄罗斯从“ngrok”出口默认的功能(){常数{努克斯}=这慰问.日志(努克斯.选项)//我的下一个模块代码在这里}
这里有很多价值。我们想要的是一种方式,当我们在开发模式,你将看到从控制台,在我们的文本选项
我们有dev
设置为是的
.这意味着我们可以添加一个if语句来检查dev是否为false,如果不处于dev模式则返回。
进口俄罗斯从“ngrok”出口默认的功能(){常数{努克斯}=这//不要在生产中使用ngrok如果(努克斯.选项.dev===假){返回}//更多信息如下:)}
我们希望在下一个服务器监听时启动ngrok隧道。为此,我们需要一种连接到next并侦听端口的方法,以便进行连接。这就是Nuxt钩子的作用所在。<一个href="//www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt">Nuxt钩子一个>是next活动的听众。我们将使用nuxt.hook()
传入的值听
后跟一个异步函数。在这个函数中,我们需要传入服务器,然后传入端口。
进口俄罗斯从“ngrok”出口默认的功能(){/ /[…]/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯.钩(“听着”,异步功能(服务器,{港口}){})}
然后,我们等待ngrok连接传入port的值并将其分配给我们的url,url是在函数外部定义的。我们现在可以运行控制台.log
在函数中查看url的结果。
进口俄罗斯从“ngrok”出口默认的功能(){/ /[…]让网址/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯.钩(“听着”,异步功能(服务器,{港口}){网址=等待俄罗斯.连接(港口)//我们这里有我们的公共url慰问.日志(网址)})}
现在,如果你运行dev命令并打开控制台,你会看到来自ngrok的url。打开该URL将显示你的网站在开发模式。
虽然这应该工作,但我们可能会遇到一些关于最大连接和其他限制的问题,因此最好设置一个<一个href="https://ngrok.com/" rel="nofollow noopener noreferrer" target="_blank">身份验证令牌一个>这可以从ngrok网站免费完成。
一旦我们有了我们的令牌,我们就可以建立我们的.环境
文件并添加我们的令牌。
NGROK_TOKEN=my-authtoken-from-ngrok
别忘了确保你的.环境
文件已添加到您的.gitignore
.
我们现在可以设置选项
相当于我们公司ngrok财产的期权numxt.config.js文件
或者等于一个空对象,以防我们没有定义任何选项。我们还添加了一个常量代币
等于NGROK_TOKEN
从我们的.环境
文件或选项.token
这和numxt.options.ngrok.token
,如果该值是在俄罗斯
我们公司的财产numxt.config.js文件
.
然后我们可以等待ngrok authtoken传入令牌值。
进口俄罗斯从“ngrok”出口默认的功能(){/ /[…]//读取nuxt.config.js中定义的ngrok属性常数选项=努克斯.选项.俄罗斯||{}常数代币=过程.环境.NGROK_TOKEN||选项.代币/ /[…]}
然后,我们可以等待ngrok authtoken传入的值代币
我们在上面定义过。
进口俄罗斯从“ngrok”出口默认的功能(){/ /[…]//读取nuxt.config.js中定义的ngrok属性常数选项=努克斯.选项.俄罗斯||{}常数代币=过程.环境.NGROK_TOKEN||选项.代币/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯.钩(“听着”,异步功能(服务器,{港口}){如果(代币){等待俄罗斯.身份验证令牌(代币)}网址=等待俄罗斯.连接(港口)//我们这里有我们的公共url慰问.日志(网址)})}
但它真的有效吗?如果我在开发过程中改变了什么,他们会在那个网址上看到吗?让我们看一看。如果我们转到索引页并添加一些文本。例如“URL from ngrok:”您现在将看到<一个href="http://localhost" rel="nofollow noopener noreferrer" target="_blank">本地服务器一个>还有你打印到控制台的ngrok的url。多酷啊。
<p>来自ngrok的URL:p>
让我们把来自ngrok的url添加到vue模板中。我们可以使用publicRuntimeConfig来访问我们的ngrok url,然后使用publicRuntimeConfig来访问$配置
从上下文。为此,我们将url分配给numxt.options.publicRuntimeConfig.ngrok
. 我们现在可以移除控制台.log
因为这已经不再需要了。
进口俄罗斯从“ngrok”出口默认的功能(){/ /[…]/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯.钩(“听着”,异步功能(服务器,{港口}){如果(代币){等待俄罗斯.身份验证令牌(代币)}网址=等待俄罗斯.连接(港口)//将公共url添加到公共runtimeConfig努克斯.选项.公共运行时配置.俄罗斯={网址}})}
我们现在可以在Vue模板中使用$配置
如果我们将它包装在一个链接标签中,那么它将是可点击的。
<模板><p>来自ngrok的URL:<一个:href="$config.ngrok.url">{{config.ngrok美元。url}}一个>p>模板>
让我们运行dev服务器,现在您应该可以看到页面上打印的来自ngrok的URL。多酷啊。
通常,我们可能不想将URL打印到页面上。如果我们能将它添加到next CLI中,这样我们每次运行dev命令时都能看到它,并能够从那里点击并打开它,那就更好了。然后,我们可以与任何需要的人共享该链接,而不必在.vue文件或控制台中公开它。
我们可以通过文本选项
. 您可以通过记录文本选项
到控制台并搜索cli。如果你这样做了,你会发现我们有一个<一个href="//www.lycasleep.com/docs/2.x/configuration-glossary/configuration-cli">badgeMessages
财产。这个绿框显示了环境,渲染和目标的信息以及应用正在监听的端口。
我们可以使用push ()
方法将我们的URL推送到next CLI。
/ /[…]努克斯.钩(“听着”,异步功能(服务器,{港口}){/ /[…]//将公共url添加到CLI中的Nuxt框中努克斯.选项.客户端.badgeMessages.推(网址)})})
现在,当我们运行dev命令时,我们的url就会出现在绿色框中。当然,我们可以通过在URL之前添加一些文本来进一步改进这一点,以便用户知道它是什么。
/ /[…]努克斯.钩(“听着”,异步功能(服务器,{港口}){/ /[…]//将公共url添加到CLI中的Nuxt框中努克斯.选项.客户端.badgeMessages.推(`公共URL:${网址}`)})})
我们还可以使用名为的包更改此链接的颜色并在其下面加下划线<一个href="https://www.npmjs.com/package/chalk" rel="nofollow noopener noreferrer" target="_blank">粉笔一个>这使我们可以设计我们的终端。
进口俄罗斯从“ngrok”进口粉笔从“粉笔”/ /[…]
然后我们可以使用chalk.underline.yellow
或者粉笔包里的其他颜色。
进口俄罗斯从“ngrok”进口粉笔从“粉笔”/ /[…]努克斯.钩(“听着”,异步功能(服务器,{港口}){/ /[…]//用粉笔改变颜色努克斯.选项.客户端.badgeMessages.推(`公共URL:${粉笔.下划线.黄色的(网址)}`)})}
现在您将看到,在运行dev命令时,我们的公共URL带有下划线和黄色的链接。然后可以点击并打开它,当然可以与世界上任何地方的任何人共享,这样他们就可以在dev模式下实时观看您的更改。
当我们关闭Nuxt时,我们应该关闭我们的ngrok连接。要做到这一点,我们可以钩住Nuxt,寻找它何时关闭,并运行一个函数来断开ngrok的连接。
/ /[…]出口默认的功能(){/ /[…]努克斯.钩(“关闭”,功能(){网址& &俄罗斯.断开()})}
进口俄罗斯从“ngrok”进口粉笔从“粉笔”出口默认的功能(){常数{努克斯}=这//不要在生产中使用ngrok如果(努克斯.选项.dev===假){返回}//读取nuxt.config.js中定义的ngrok属性常数选项=努克斯.选项.俄罗斯||{}常数代币=过程.环境.NGROK_TOKEN||选项.代币/ / //www.lycasleep.com/docs/2.x/internals-glossary/internals-nuxt挂钩努克斯.钩(“听着”,异步功能(服务器,{港口}){如果(代币){等待俄罗斯.身份验证令牌(代币)}网址=等待俄罗斯.连接(港口)//将公共url添加到公共runtimeConfig努克斯.选项.公共运行时配置.俄罗斯={网址}//将公共url添加到CLI中的Nuxt框中努克斯.选项.客户端.badgeMessages.推(`公共URL:${粉笔.下划线.黄色的(网址)}`)})努克斯.钩(“关闭”,功能(){网址& &俄罗斯.断开()})}
我们刚刚创建了可以在项目中使用的本地模块。有时这就足够了,但有时我们想要跨项目共享我们的模块,或者更好,与next社区共享。要做到这一点,我们需要使用模块模板创建我们的模块,并将其发布到npm。
到今天为止,我们正在努力改进这个模板,使它对用户更友好。所有模块都是使用typescript创建的,应该包含测试、文档和示例。
检查我们的<一个href="//www.lycasleep.com/examples/modules-internal">CodeSandbox例子一个>对于本模块。
看看我们出版的<一个href="https://ngrok.www.lycasleep.com/" rel="nofollow noopener noreferrer" target="_blank">ngrok模块一个>.
看看我们的名单<一个href="https://modules.www.lycasleep.com/" rel="nofollow noopener noreferrer" target="_blank">Nuxt模块一个>.