Vue?????????????????

???????? .vue ??????????????????????????? Karma????? Webpack??headless browser????????????????????mocha??ava??jasmime??node-tap??????????????÷???????????? Webpack ????????????????????? browser ??????????й??????????
?????????????е???????????? JS ???????????????????????????????????????????в????????????????????
// a.vue
<template>
<div>
<button @click="minus" class="minus">-</button>
<input :value="result" disabled />
<button @click="plus" class="plus">+</button>
</div>
</template>
<script>
export default {
data() {
return { result: 0 }
}??
methods: {
minus() {
this.result--;
}??
plus() {
this.result++;
}
}
};
</script>
<style></style>
?????????????????????????
const test = require('ava');
const Vue = require('vue');
let a = require('a.vue');
let vm = new Vue(a);?
test(t => {
t.is(vm.result?? 0);
vm.plus();
vm.minus();
...
});
??????????????
??????????? .vue ??????????? .vue ???????????? template??script??style ????????????????????? JS ????
????const a = require('a.vue');
????<template>
????SyntaxError: Unexpected token <
???????????????????? .vue ?????
??????????????????????? Node ????????????
?????????? Module ??????????????????????????????? id ?????·????????????????
????// Module.js
????// ??鹹????
????function Module(id?? parent) {
????this.id = id;  // filename??·???????????
????this.exports = {};
????...
????}
?????????? Module ?????????????????????????????????黺?棬????????????飻???????????????????岻????????????????
????Module._cache = Object.create(null);  // ??黺??
????Module._extensions = Object.create(null);
???????? Module ????????????????????
????Module.prototype._load
????Module.prototype._compile
????Module.prototype.require
?????????????????????
????1. Module.prototype._load ????
????Module.prototype._load = (request?? parent?? isMain) => {
????1. ??? Module._cache ??????л???;
????2. ?????У? new Module()?? ??????;
????3. ????Щ???;
????4. ??????????????? ??? Module. _extensions ????跽??;
????5. ??跽??????????? ??? Module.prototype._compile;
????6. ???? module.exports
????};
????2. Module.prototype._compile ????
????Module.prototype._compile = (content?? filename) => {
????1. ???? require ????
?????    // Module.prototype.require ??? Module.prototype._load ?????
????require = Module.prototype.require;
????2. ? require ????????????:
????...
????require.cache = Module._cache;?
????require.extensions = Module._extensions;
????3. ???????????????????
????(function(exports?? require?? module?? __filename?? __dirname) {
????// ???????
????})
????4. ???з???
????};
?????????￡???????????????????
????1. ??????飬??黺?棻
????Module.prototype._load();
????2. ??????????????????????????????飬????????????????????????????require?? module?? exports…??
????3. ??а??????????????????????
????(function(exports?? require?? module?? __filename?? __dirname) {
????// ???????
????require(sth) -> Module.prototype._load()
????});
????4. ??????? module.exports
??????????????????????? .vue ????????????? require.extensions ?????? .vue ?????????????
????require.extensions['.vue'] = function(module?? filename) {
????var file = fs.readFileSync(filename?? 'utf8');
????// ???? .vue ??????????????? JS ?????????
????var script = extract(file);
????module._compile(script?? filename);
????};
???????????????????? .vue ???????????? JS ???????????
????.vue ?????????У???????????? template ?? script ????????????????????? template ????? JS ???????????????????????????????????????? template ?? script ????????????????
?????????и?С????template ??????????????????????? JS ?????У?????????????????????????? JS ????????????????? template ??????????
var scriptStr = "module.exports = {
data() {
return {}
}??
methods: ...
};"
var templateStr = "module.exports.template = " + JSON.stringify(templateStr) + ";"
var content = scriptStr + templateStr;
??????????????????????
????1. ES6 module???? Node ???????? ES6 module?????????п????????????????????????? babel ?????
????babel.transform(js?? babelrc).code;
????2. Vue ?????????????? template ?????????????????????????? Vue??
????const Vue = require('vue/dist/vue.common.js');
????3. Webpack resolve.alias????????? Webpack ??????????????? alias ???????????????? Webpack ?????????? alias ???·????????????????????? module-alias ???????????????????????·????????????д??? Module._resolveFilename ??????
????4. DOM ????????????? jsdom-global ????? DOM ?????????
????require('jsdom-global')();
?????????????????????
require('vue-tester'); // ???????????д?????????? .vue ????require(‘jsdom-global’)();?
const Vue = require('vue/dist/vue.common.js');?
const ava = require('ava');??
const a = require('a.vue').default;
?let vm = new Vue(a);
vm.$mount();
?test(t => {?
t.is(vm.result?? 0);
vm.$el.querySelector('button.plus').click();
t.is(vm.result?? 1);
vm.$el.querySelector('button.minus').click();
t.is(vm.result?? 0);?})??
});
????С??
???????? Node ???????????????? .vue ?????????????????????? .vue ??????????????? JS ?????????????????????????????????????????????????????????????????? .vue ????????????????????????????