类似 babel-register 的 Vue 单文件组件编译模块 Vuegister 插件的使用

为什么使用 Vuegister

最近，Parcel 默认支持了 Vue 单文件组件的打包，于是尝试使用 Parcel 搭建了 Vue.js 单文件组件开发环境。使用时可以开箱即用的开始 Vue.js 项目，非常方便。但是当我想尝试使用 Mocha + Chai 实现组件测试时却发现单文件组件并不能直接被测试：Parcel 直接将编译的结果进行了打包，没有独立的 Vue 组件编译，这也是为什么之前尝试使用了 Vueify ，因为想要通过 编译 -> 测试文件引入编译后的文件 -> 测试 的方式实现组件测试。

为了实现这个过程的自动化，考虑利用 Mocha 的 --require 选项 在启动测试前使用 Vueify 进行编译，暂时想到使用 node.js 的 pirates 模块，劫持 require 模块对 Vue-SFC 提前编译，整个思路大概是：先劫持 *.vue 文件的 require 过程，然后调用 Vueify 进行编译，之后就可以直接测试 Vue-SFC了。但是，Vueify 的编译过程是异步的，导致 require 时并不能返回相关模块编译后的结果。虽然还在尝试使用一些同步模块来使这个异步过程同步化，但偶然的，当我尝试在 npm 官网 输入 Vue-register 时，找到了 Vuegister。

Vuegister 是一个类似于 babel-register 的模块，可以实现通过 require 来加载 Vue-SFC 文件，用法也类似于 babel-register ，只要在项目入口前 require 该注册器即可。

这个模块可以说是完全符合了我的要求，用法也很简单，在 Mocha 中使用时只要像 babel-register 一样，在 Mocha 启动时将 Vuegister 的注册器作为 --require 的参数即可。

Vuegister 的使用

安装

1
2

npm install vuegister -D //使用 npm
yarn add Vuegister -D //使用 yarn

使用方式

在程序入口处调用

1

require('vuegister').register()

即可。

使用 Mocha 时

1

mocha --require vuegister/register

具体可以参考官方文档

需要注意的

在 Parcel 项目中使用时，Vuegister 对于 SFC 中的 script 部分，需要添加 lang 属性为 babel，但是一旦添加 Parcel 报错，解决方式是，设置 Vuegister script 的默认语言(即默认 lang 值)：

1
2
3
4
5

require('vuegister').register({
  lang: {
    script: 'babel'
  }
})

这样就不需要在 SFC 中添加属性，避免了冲突。

• ← Previous Post
• Next Post →