.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了