摘要:今天的主线任务是,稍微了解下的这里简单记录下打怪经历故事背景大祭司布鲁梅尔,跟玩家说在杰罗瓦镇的西北方有一个迷宫,里面有个被关闭了年的魔物,我们需要把这个魔物干掉,正好以此来测试下玩家是否具备开启者的资格,也就是战斗系转职资格。
今天的主线任务是,稍微了解下vue-loader的sourcemap
这里简单记录下打怪经历
故事背景大祭司布鲁梅尔,跟玩家说在杰罗瓦镇的西北方有一个迷宫,里面有个被关闭了300年的魔物,我们需要把这个魔物干掉,正好以此来测试下玩家是否具备"开启者"的资格,也就是战斗系转职资格。
于是作为勇士的我来到了杰村,获取钥匙
任务之前,先说一下,有不少法兰城的勇士,并不喜欢它,有人说它违反了webpack自定义loader的精神,不支持inlineTemplate(具体这个inlineTemplate是什么鬼?)...
引自https://webpack.github.io/doc...
do only a single task
Loaders can be chained. Create loaders for every step, instead of a loader that does everything at once.
This also means they should not convert to JavaScript if not necessary.
Example: Render HTML from a template file by applying the query parameters
I could write a loader that compiles the template from source, execute it and return a module that exports a string containing the HTML code. This is bad.
作为萌新的我,并不知道vue-loader发生了什么了,只能说一脸蒙逼
但是我内心其实觉得vue-loader作为一个vue配套的工具,还是挺不错的
怀揣这样的心情,就来到了门口
怎么说呢,还是先了解下vue-loader的作用,它可以transform以vue结尾的文件,从而达到一些目的,比如单文件component, hot reload, scope css...
项目结构这里要了解的sourcemap,都在parser.js文件中
source code分析引入的外部模块
var compiler = require("vue-template-compiler")
var cache = require("lru-cache")(100)
var hash = require("hash-sum")
var SourceMapGenerator = require("source-map").SourceMapGenerator
lru-cache,lru缓存,vue1.0内部也用的
hash-sum,其简介为Blazing fast unique hash generator,用于生成hash
soruce-map,一个我们生成sourcemap主要的依赖库,这里用的其属性为SourceMapGenerator的类
vue-template-compiler,模块发现是vue内部的代码,为src/entries/web-compiler.js文件,这个模块是由vue的build/build.js,使用rollup生成的packager,哦? 少年好像又学到了什么。具体vue-template-compiler搞了什么,暂时不管,先标个红
generateSourceMap函数
function generateSourceMap (filename, source, generated) {
var map = new SourceMapGenerator()
map.setSourceContent(filename, source)
generated.split(splitRE).forEach((line, index) => {
if (!emptyRE.test(line)) {
map.addMapping({
source: filename,
original: {
line: index + 1,
column: 0
},
generated: {
line: index + 1,
column: 0
}
})
}
})
return map.toJSON()
}
判断空行的目的是,这样的话,那些空白行就不会生成map,减少map体积
chrome调试的时候,那些空白行也是灰的,没必要打断点嘛
然后,那个换行正则也是很有意思,外服的玩家讨论了一番,https://github.com/webpack/we...
结论就是g这样的flag,js容易出问题的,比如你可以在控制台里感受下:
var r = /
/g;
console.log(r.test("
")); // => true
console.log(r.test("
")); // => false
解决是,要吗将正则的属性lastIndex = 0,要吗将g去掉
导出函数
module.exports = function (content, filename, needMap) {
var cacheKey = hash(filename + content)
// source-map cache busting for hot-reloadded modules
var filenameWithHash = filename + "?" + cacheKey
var output = cache.get(cacheKey)
if (output) return output
output = compiler.parseComponent(content, { pad: true })
if (needMap) {
if (output.script && !output.script.src) {
output.script.map = generateSourceMap(
filenameWithHash,
content,
output.script.content
)
}
if (output.styles) {
output.styles.forEach(style => {
if (!style.src) {
style.map = generateSourceMap(
filenameWithHash,
content,
style.content
)
}
})
}
}
cache.set(cacheKey, output)
return output
}
任务途中,突遇掉线,果然很魔力
掉线回城,东门医院补血,继续任务
这里举个例子,然后理解下
index.html
src/index.js
const Vue = require("vue")
const Hello = require("./Hello.vue")
new Vue({
el: "#app",
components: {
Hello: Hello
},
render: function(h) {
return h(
"Hello"
)
}
})
src/Hello.vue
然后以此例来分析下,
3个参数
content: Hello.vue中的文件内容
filename: Hello.vue
needMap: webpack配置中如果dev-tools使用了"source-map"... 则为true
调用compiler.parseComponent(content, { pad: true }),会解析成下面的格式,
稍微注意style是一个数组的形式,即可以有多个style标签
然后这些标签其实可以有src属性,表示引入外部对应的文件,比如这里判断了!output.script.src
{ template: { type: "template", content: "战斗结束hello", start: 10, end: 65 }, script: { type: "script", content: "// // // // // // module.exports = { created() { console.log("hello .vue file") } } ", start: 86, end: 161 }, styles: [ { type: "style", content: " .hello { font-size: 12px; } ", start: 186, scoped: true, end: 217 } ], customBlocks: [] }
ok,没怎么费血瓶,顺利获取重要道具:大地翼龙的鳞片1个,下一层继续出发
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86666.html
摘要:在目前的开源市场,前端架构中最火热的项目非莫属了。在使用的过程中,我们会用到各式各样的,毫无疑问,因为机制的存在让拥有了无限的可能性,让几乎可以容纳一切前端需要的资源。 在目前的开源市场,前端架构中最火热的项目非webpack莫属了。在使用webpack的过程中,我们会用到各式各样的loader,毫无疑问,因为loader机制的存在让webpack拥有了无限的可能性,让webpack几...
摘要:当前正在处理的节点,以及该节点的和等信息。源码解析之一整体分析源码解析之三写作中源码解析之四写作中作者博客作者作者微博 笔者系 vue-loader 贡献者之一(#16) 前言 vue-loader 源码解析系列之一,阅读该文章之前,请大家首先参考大纲 vue-loader 源码解析系列之 整体分析 selector 做了什么 const path = require(path) co...
摘要:决定改开发好,也好,二者结合实践一下,网上一搜,刚好有。下面我把所有过程写下,如有问题可以再文后留言,我详解一下。 决定改TypeScript开发TypeScript好,vuejs也好,二者结合实践一下,网上一搜:https://github.com/Microsoft/...,刚好有。以后就用TypeScript搞了。下面我把所有过程写下,如有问题可以再文后留言,我详解一下。或者加我...
相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧。 过完年回来后,我接手了公司的新项目。新项目是一个spa。很自然,我就想到了vue-cli脚手架了,当时研究一下它的webpack配置。于是,就有了其他的内容。 今天这篇文章,是在原来的基础上,增加了一些新版本的内容,但实质上变化不大。 说明 此仓库为vue-cli webpack的配置分析...
阅读 3170·2023-04-25 19:09
阅读 3881·2021-10-22 09:54
阅读 1755·2021-09-29 09:35
阅读 2912·2021-09-08 09:45
阅读 2245·2021-09-06 15:00
阅读 2771·2019-08-29 15:32
阅读 1033·2019-08-28 18:30
阅读 372·2019-08-26 13:43
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要