ts-loader如何与vue单文件组件衔接

.ts-loader是如何与vue单文件组件衔接作用的

https://github.com/microsoft/TypeScript-Vue-Starter

https://www.npmjs.com/package/ts-loader

从文档上可以看到，需要安装 typescript 和 ts-loader这两个依赖

ts-loader是如何处理.vue单文件组件的，

在rule的配置里，ts-loader的test是以.ts文件结尾的啊，下面研究下

———————————————————————————————

首先再来回忆一下vue-loader+VueLoaderPlugin的处理过程：

vueloaderplugin在webpack初始化的阶段，

vueloaderplugin扩展了开发者module.rule的配置，加入了vue-loader内部提供的pitcher-loader（即：pitcher这个rule，它的use是pitcher-loader），

（pitcher的resourceQuery是 request带”vue”这个query的 （如xxx.xx?vue&xxx) ）

并以这样的顺序将rule重新组合

[pitcher,…clone Rules,…vue-loader] （将vue-loader放到最后，将pitch-loader放到最开始)

pitcher-loader的匹配条件是，request中带”vue”这个query  （如xxx.xx?vue&xxx)

Step1:

当处理一个.vue文件的时候，vue-loader会判断，如果request不带type=vue，会生成下面这一大段js module:

"import { render, staticRenderFns } from "./index.vue?vue&type=template&id=2964abc9&"

import script from "./index.vue?vue&type=script&lang=ts&"

export * from "./index.vue?vue&type=script&lang=ts&"

/* normalize component */

import normalizer from "!../node_modules/vue-loader/lib/runtime/componentNormalizer.js"

var component = normalizer(

script,

render,

staticRenderFns,

false,

null,

null,

null

)

/* hot reload */

if (module.hot) {

var api = require("/Users/huhao/Desktop/demo/node_modules/vue-hot-reload-api/dist/index.js")

api.install(require('vue'))

if (api.compatible) {

module.hot.accept()

if (!api.isRecorded('2964abc9')) {

api.createRecord('2964abc9', component.options)

} else {

…

Step2:

然后开始对这个新生成的一坨jsmodule进行处理，依赖收集的过程中，会拿到

import { render, staticRenderFns } from "./index.vue?vue&type=template&id=2964abc9&"

import script from "./index.vue?vue&type=script&lang=ts&"

export * from "./index.vue?vue&type=script&lang=ts&"

…

这些行request，然后对每个request进行resolve,创建独立的module..

因为request带vue这个query，所以会先被pitcher-loader处理，pitcher在runLoaders过程中操作，会第一个执行，剔除掉eslint-loader，剔除pitcher自身，根据不同的type=xxx 返回一段新的request，

..有template的..

..有style的..

..有script的..

然后我们会发现这个时候处理script的生成的request，附带了ts-loader了。

问题： 为什么script的部分生成的request。。直接就判定附带有ts-loader了

"/Users/huhao/Desktop/demo/node_modules/ts-loader/index.js??ref--2!/Users/huhao/Desktop/demo/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/huhao/Desktop/demo/src/index.vue?vue&type=script&lang=ts&"

我们向前看，

在最后生成上面这坨request的过程前，会先经过build的过程，

在调用栈doBuild的时候，要执行runLoaders方法的时候，this.loaders就已经包括ts-loader了