@_pearofducks/require-extension-hooks-vue 中文文档教程

Question

require-extension-hooks-vue

vue 文件的简单解析器

使用 require-extension-hooks 你可以在节点中加载 .vue 文件，这对无浏览器单元测试非常有帮助。

Installation

npm install require-extension-hooks require-extension-hooks-vue --save-dev

Usage

const hooks = require('require-extension-hooks');
hooks('vue').plugin('vue');

let component = require('./components/app.vue');

rehv 会将

您可以加载外部模板和脚本：

<template src="./tpl.html"/>
<script src="./script.js"/>

您还可以转换为其他语言的模板：

<template lang="pug">...</template>

只需像安装 vue-loader 一样安装相关的库：

npm install pug --save-dev

rehv 将获取它.

对于其他语言的脚本：

<script lang="ts">...</script>

您需要为该扩展名称注册一个挂钩：

hooks('ts').push(function({content}){
/* transpile your script code here */
});

可能很快就会有额外的脚本语言挂钩库可用

Custom Blocks

如果您的 .vue< 中有自定义块/code> 文件，你可以使用 require-extension-hooks 解析。 通过挂钩到文件类型 vue-block-(block name) 可以使用块。 钩子应该返回 JavaScript 代码，在一个字符串中，将附加到已编译的 .vue 文件中。

一个名为 COMPONENT_OPTIONS 的助手在插件导出中可用，允许您修改 从 .vue 文件导出的组件选项对象。

例如，对于 块来说，它的数据可以通过 this.json 在 组件，你可以使用 mixin：

const { COMPONENT_OPTIONS } = require('require-extension-hooks-vue');
hooks('vue-block-json').push(({ content }) =>
    `${COMPONENT_OPTIONS}.mixins = (${COMPONENT_OPTIONS}.mixins || []).concat({
        data: () => ({
            json: ${JSON.parse(content)}
        })
    });`
);

Register

你可以使用注册文件自动注册 vue 钩子：

require('require-extension-hooks-vue/register');

这意味着你可以从 cli 工具注册模块：

mocha --require require-extension-hooks-vue/register

Configuration

使用 configure 方法设置配置选项：

const plugin = require('require-extension-hooks-vue');
plugin.configure({ transpileTemplates: false });

transpileTemplates

true
是否自动转换具有 lang 属性

sourceMaps

true
的模板 是否设置源映射支持。 这利用了 source-map-support 库。